React-redux
React-redux是React用来绑定redux的，其中不得不提及的是Provider，以及与其配合使用的高阶函数connect.下面我会详细的介绍一下它们的使用：
Provider
首先，Provider需要放在包裹所有子组件的位置，以便其通过context将store传递给所有的子组件。子组件需要使用store中的state就需要用到connect高阶函数了。
connect（）高阶函数
使用connect（）来获取store中的状态数据以及dispatch action（即分发函数）。
connect（）函数有四个参数，分别是
1. mapStateToProps?: Function
2. mapDispatchToProps?: Function | Object
3. mergeProps?: Function
4. options?: Object
其中，最常用的是前俩个参数，mapStateToProps,一般只传递一个参数state，用法如下：
上图中，会将登录人的信息存放在currentUserInfo这个对象中，然后在Props中定义之后就可以拿来使用。用法大家都知道哈，我就不罗嗦了。
对于mapDispatchToProps,如果connect函数中省略不写的话，默认可以在函数中通过this.props.dispatch（）的方式调用 ，括号中需要传入事先定义好的action Creator，这样就完成了对connect的使用。但是这样能够达到redux管理的效果吗？答案当然是no。
想要真正的实现redux管理，还需要编写store.js以及action.js、reducer.js，其中action.js定义你要分发函数使用的一些creator和actionType。示例代码如下：
const START_LOGIN = 'AUTH/START_LOGIN';
const LOGIN_SUCCESS = 'AUTH/LOGIN_SUCCESS';
const LOGIN_FAILURE = 'AUTH/LOGIN_FAILURE';
const LOGOUT = 'AUTH/LOGOUT';
const LOGOUT_SUCCESS = 'AUTH/LOGOUT_SUCCESS';
const ActionTypes = {
START_LOGIN,
LOGIN_SUCCESS,
LOGIN_FAILURE,
LOGOUT,
LOGOUT_SUCCESS,
};
/**
* 开始登录
*
* @param {string} userName
* @param {string} password
* @returns
*/
function startLogin(userName: string, password: string) {
return {
type: START_LOGIN,
userName,
password,
};
}
/**
* 登录成功
*
* @param {object} user
* @returns
*/
function loginSuccess(user: object) {
return {
type: LOGIN_SUCCESS,
user,
};
}
function loginFailure() {
return {
type: LOGIN_FAILURE,
};
}
function logout() {
return {
type: LOGOUT,
};
}
function logoutSuccess() {
return {
type: LOGOUT_SUCCESS,
};
}
const ActionCreators = {
startLogin,
loginSuccess,
loginFailure,
logout,
logoutSuccess,
};
export { ActionTypes, ActionCreators };
reducer.js是触发action creator后执行的，会根据此时的actionType来判断执行，并且更新state，最后组件重新渲染的过程。
登录的reducer.js的关键代码：
function onLoginSuccess(state: object, action: ActionType) {
return {
...state,
loginStatus: 'LOGIN_SUCCESS',
currentUser: {
userName: action.user.username,
password: action.user.password
},
};
}
export default function userLogin (state: object = defaultState, action: ActionType) {
if (action.type === ActionTypes.START_LOGIN) {
return {
...state,
loginStatus: 'LOGINING',
};
} else if (action.type === ActionTypes.LOGIN_SUCCESS) {
return onLoginSuccess(state, action);
} else if (action.type === ActionTypes.LOGIN_FAILURE) {
return {
...state,
loginStatus: 'LOGIN_FAILURE',
};
} else if (
action.type === ActionTypes.LOGOUT ||
action.type === ActionTypes.LOGOUT_SUCCESS
) {
return defaultState;
}
return state;
}
重点是store.js的内容，用到的主要有redux的createStore，applyMiddleware，combineReducers，以及createBrowserHistory的createHistory方法。示例如下：
其中connectRouter是代替react-router-redux中的ConnectedRouter，由于在运行ConnectedRouter的过程中报错，找不到store，检查后也未解决，最后采用connected-react-router里面的connectRouter，最后路由信息随着页面跳转发生变化。这个案例的初衷是使用react-router-redux管理路由信息、登录信息等。大家有什么想法，欢迎一起探讨！QQ:1391038286