首页 > 代码库 > React+Redux学习笔记：React+Redux简易开发步骤
React+Redux学习笔记：React+Redux简易开发步骤
前言
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。
演示地址：index2.html
具体开发步骤
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变化。
React+Redux学习笔记：React+Redux简易开发步骤
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。