一个Redux实现的简单计数器reduxCounter
一个ReduxTodo实例reduxTodoExample(来自官方)
React Redux中文文档
Redux中文文档
关于react-redux中的connect用法介绍及原理解析
react-redux实现一个简单counter
redux提供顶层数据分发实现,提供combineReducers()来连接多个reducer
react-redux提供provider、connect来连接React组件
克隆程序,然后执行:
cd 到任意项目
yarn
npm run dev
打开http://localhost:8080/即可查看
# 项目打包
npm run build
理解以下五个函数:
- reducer是一个函数, (state=initstate, action) => newState
- combineReducers({reducer1, reducer2}),将多个reducer合并
- createStore(reducers, initState)
- connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])(组件)
- mapStateToProps(state, ownProps) => stateProps
- mapDispatchToProps(dispatch, ownProps) => dispatchProps
- mergeProps:默认 Object.assign 来merge前面两个方法传入的props
- options: object,一般不用
- dispatch(action),action是一个普通对象
Provider将store内容放到所有子组件(不管多少层)的context中,子组件可通过connect高阶组件将context的store内容解构并加载到自己的props中,也可以自己获取context中的store,但需要自己去实现connect中的一些逻辑(如mapStateToProps)
注: connect之后的组件无法通过context获取到store内容,只能通过props获得一个dispatch方法用于事件的分发
React Context
context除了在父组件通过getChildContext() 返回context对象,还需要在需使用context的组件中通过组件.contextTypes = {}来显示声明此context值
之后组件可以在参数中取用,如:
const Component = (props, context) => {
console.log(context.store)
return (
<div>test</div>
)
}
Component.contextType={
store: PropTypes.object,
}