使用react-redux开发的简单步骤
一、安装相关包
npm install redux react-redux --save
二、根据具体情形创建模块文件
Store.js、Reducer.js、Actions.js
Store.js的作用在于引出store,方便在使用的时候引入。
Reducer.js的作用在于定义reducer,最好用combineReducers拆分reducer。
Actions.js用于定义ActionCreator,方便在dispatch action的时候根据不同变量生成不同action。
三、使用Provider组件以便于所有组件都能直接使用store
在使用根组件(通常是入口文件index.js)处引入Provider组件。
在index.js中引入store,
在ReactDOM.render()方法的第一个参数处使用Provider包裹根组件,
然后给Provider组件的store属性赋值为之前引入的store。
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; import { Provider } from 'react-redux'; import store from './Store'; ReactDOM.render(<Provider store={store}> <App /> </Provider>, document.getElementById('root')); registerServiceWorker();
四、编写子组件
先写UI Component,即通常所写的普通组件;
然后定义Container Component,使用connect方法(从react-redux包中引入)即可将UI Component转化为Container Component。
注意要传递mapStateToProps、mapDispatchToProps两个参数。
最后导出组件以便于使用的时候引入。
import React from 'react'; import { connect } from 'react-redux'; import { toggleItemAction, removeItemAction } from './Reducer'; class Display extends React.Component { componentWillMount(){ this.toggleCompleted = this.props.toggleCompleted; this.removeItem = this.props.removeItem; console.log(this.props); } render(){ return <div> <ul> { this.props.items.map(item => { let tmp = null; if(item.completed){ tmp = <del>{item.value}</del> } else { tmp = item.value; } if(tmp === null || tmp ===''){ return null; } return <li key={item.id}> {tmp} <button id={'toggle' + item.id} onClick={this.toggleCompleted}>Toggle</button> <button id={'remove' + item.id} onClick={this.removeItem}>Remove</button> </li> }) } </ul> </div> } } const mapStateToProps = (state) => { return { items: state.items }; }; const mapDispatchToProps = (dispatch) => { return { toggleCompleted(e){ let id = e.target.id.substring(6); dispatch(toggleItemAction(id)); }, removeItem(e){ let id = e.target.id.substring(6); dispatch(removeItemAction(id)); } }; }; const DisplayContainer = connect(mapStateToProps, mapDispatchToProps)(Display); export default DisplayContainer;
五、注意点
1.mapStateToProps参数其实是一个函数,默认带有一个参数为state,作用是将state中的值映射到我们定义的组件的props属性中。
一下定义一个mapStateToProps:
const mapStateToProps = (state) => { return { items: state.items }; };
这样的话,在组件中就可以通过this.props.items获取到state.items。
mapStateToProps函数所返回的对象可以认为是组件props属性的一个子集。
2.mapDispatchToProps参数是一个对象或者函数,我习惯于写成一个函数,函数具有一个默认属性即为dispatch,相当于store.dispatch(),mapDispatchToProps函数会返回一 个对象。对象中的所有方法都会传递给组件的props属性。也可以认为它所返回的对象是组件props属性的一个子集。
const mapDispatchToProps = (dispatch) => { return { toggleCompleted(e){ let id = e.target.id.substring(6); dispatch(toggleItemAction(id)); }, removeItem(e){ let id = e.target.id.substring(6); dispatch(removeItemAction(id)); } }; };
以上代码定义了一个mapDispatchToProps函数,这样,在组件内部可以通过this.props[propertyName]访问到toggleCompleted函数或者removeItem函数。
3.如何在mapDispatchToProps函数定义的一系列函数中获取组件内部数据?
解决方法有两种:
(1)通过event.target来获取事件发生节点,然后通过DOM属性获取组件内部的数据。注意点2中的代码即是例子。
(2)在组件内部定义事件处理函数,不直接利用this.props[propertyName]来处理组件事件。组件内部自定义事件处理函数可以通过this等获取到组件内部数据,然后在组件自定义事件处理函数内部调用this.props[propertyName],传递参数即可。
4.是否需要使用react-redux
react-redux是redux的作者为了方便于在React中使用redux而开发出来的。
react-redux为我们在react项目中使用redux带来了便利,但也提升了学习成本,我们需要学习一些新的API,并且遵循react-redux的开发及组件拆分规范。
如果你因为单纯的在项目中使用redux需要不断地引入store,不断地写store.[propertyName]而感到厌烦,那么可以尝试使用react-redux。
如果你认为使用redux十分方便简洁明了,那么可能并不需要使用react-redux。