Redux:React最常用的集中状态管理工具,可以独立于框架运行;
核心:state
、action
、reducer
- 定义一个
reducer
函数;
function reducer(state = { count: 0 }, action) {if (action.type === 'INCREMENT') {return { count: state.count + 1 }}...return state;
}
- 使用
createStore
方法传入reducer
函数,生成一个store 实例对象
;
const store = Redux.createStore(reducer);
- 使用 store 实例的
subscribe
方法订阅数据的变化;
store.subscirbe(() => {console.log('state发生变化了', store.getState());
});
- 使用 store 实例的
dispatch 方法提交 action 对象
触发数据变化;
store.dispatch({type: 'DECREMENT'
});
- 使用 store 实例的
getState
方法获取最新的状态数据更新到视图中;