参考阮一峰老师博客:Redux 入门教程
react-redux是redux作者给react提供的一个封装库,可以方便的将redux中的状态和方法注入到react组件中,redux中store相当于数据库,state相当于数据库的数据,dispatch(action)提供了对数据的修改方法,react-redux完成数据订阅,监测store中状态的变化并渲染更新后的react组件。
redux基本API
store:存放状态的容器,通过createStore方法接收一个reducer生成
import { createStore } from 'redux';
const store = createStore(reducer);
state:store中的状态
action:是一个对象,type是必须的,可以带一个参数
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
actionCreator:生成action的函数
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
dispatch:View 发出 Action 的唯一方法。
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
reducer:Store接收一个旧的action生成一个新的state的计算过程
const reducer = function (state, action) {
return new_state;
};
react-redux基本API
Provider:将redux store中的值传入react组件
<Provider store={store}>
<App />
</Provider>
mapDispatchToProps : redux方法和组件方法的映射
const mapDispatchToProps = dispatch => ({
switchMenu: menuName => {
dispatch(switchMenu(menuName));
}
})
mapStateToProps:redux状态和组件状态的映射
const mapStateToProps = state =>({
menuName: state.menuName
})
connect:将映射后的状态和方法注入到组件props上,组件中就可以通过this.props.xx拿到想要的状态和方法了
connect(mapStateToProps, mapDispatchToProps)(Header)
网友评论