初学react之redux

一、状态管理一直是我们绕不开的一个点，之前出了一期vue的状态管理vuex的用法，这期出一个react的状态管理redux。首先需要了解两个点，第一个是actions，第二个是reducers, actions的用处就是管理redux的一些方法，reducer是管理不同actios的触发条件，写处理逻辑的。

//actions,定义一个action: setUserInfo
const setUserInfo = (data) => {
    return {
        type: actionTypes.SET_USERINFO,
        data
    }
};
export {setUserInfo};

再定义一个reducer

//action指明了type，reducer根据action的类型来匹配对应的逻辑
const userInfo = (state = {}, action) => {
	switch (action.type) {
		case actionTypes.SET_USERINFO:
			return action.data;
		default:
			return state;
	}
};

在组件中使用

首先我们需要处理的是把reducer关联到组件中
/**
 * 1、provider包裹在最外层，使得所有组件都能获取redux的state值
 * 2、Router是路由出口
 */
class App extends React.Component {
	render() {
		return (
			//
			<Provider store={store}>
				<Router />
			</Provider>
		);
	}
}

在业务组件中使用

const mapStateToProps = state => state;

const mapDispatchToProps = dispatch => ({
	setUserInfo: data => {
        //分发reducer
	dispatch(setUserInfo(data));
	}
});
//将reducer中的state映射到组件的props中
//将redux中的actions映射到组件的props中
export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Form.create()(Login));

//触发reducer，利用props来调用reducers中的方法
this.props.setUserInfo(Object.assign({}, values, { role: { type: 1, name: '超级管理员' } }));

虽然我还没有在项目中使用过，但是在学习一些开源项目中我总结了它的用法，虽然不太完美，但是可以让自己日后更好翻阅。