前言
React+Redux 分为两部分:
- UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM
- 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文章:Redux学习笔记:Redux简易开发步骤
而React+Redux是以上两部分结合起来,方便在React中使用Redux,专用库为React-Redux.js。
React-Redux.js新增了一些新方法:
- Provider:容器跟组件,可直接把外部的state传递给所有子组件和UI组件;
- mapStateToProps:输入逻辑,把外部的state转化为props对象传递给用户自定义UI组件;
- mapDispatchToProps:输出逻辑,根据用户的操作,处理具体Action,并通过dispatch触发更新state;
- connect:根据UI组件、输入逻辑、输出逻辑生成容器组件;
源代码
本文实例源代码参考:React-Redux-Primary-Demo 中的webapp/redux/index2.js。
演示地址:React-Redux实例演示
具体开发步骤
1.创建主文件js,比如index.js
2.定义Render入口,即容器组件
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
说明:<Provider>是包裹在所有容器外面的根组件,目的是可以直接传递state给所有子组件。(利用React组件的context,可参考:React组件实现越级传递属性)
3.connect根据UI组件生成容器组件,并定义输入(mapStateToProps)、输出(mapDispatchToProps)逻辑
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
说明:connect将用户自定义的UI组件(即Counter)和React-Redux自动生成的容器组件(即App)连起来,目的是:前者负责UI展示,后者负责逻辑处理。
4.定义用户自定义UI组件,即React Component
class Counter extends Component { render() { const { value, onIncreaseClick } = this.props return ( <div> <span>{value}</span> <button onClick={onIncreaseClick}>累加一次</button> </div> ) } }
5.定义输入输出逻辑
// 输入逻辑: // 将state映射成props传递给UI组件(即Counter组件) function mapStateToProps(state) { return { value: state.count } } // 输出逻辑: // 将用户对UI组件的操作映射成Action,通过dispatch,触发reducer(即conter),生成新的state function mapDispatchToProps(dispatch) { return { onIncreaseClick: () => dispatch({ type: 'increase' }) } }
6.创建store,并绑定reducer
const store = createStore(counter); // createStore的第一个参数必须是个函数,mapDispatchToProps中执行dispatch()时,该函数就叫reducer
7.定义Reducer,生成新的state
function counter(state = { count: 0 }, action) { const count = state.count switch (action.type) { case 'increase': return { count: count + 1 } default: return state } }
说明:state生成之后,会自动触发mapStateToProps,并渲染View,不需要subscribe监听state变化。