1.React-redux介绍及安装
React-Redux这是一个React生态中常用组件，它可以简化Redux流程（需要注意的是概念：React、Redux、React-redux是三个不同的东西）
1.1 项目初始化
create-react-app demo09-React-redux
cd demo09-React-redux
npm start安装完成后，删除一些没有必要的样式和代码，在/src目录下，只留一个index.js文件，其余的全部删除。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));1.2 安装react-redux
npm install --save react-redux1.3 修改代码，让他跑起来
创建一个TodoList.js的组件。项目代码如下:
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return ( <div>Karma</div> );
}
}
export default TodoList;有了TodoList.js后，我们引入到index.js文件下，然后修改代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
ReactDOM.render(<TodoList />, document.getElementById('root'));接下来编写一下render函数中的JSX页面。
render() {
return (
<div>
<div><input /><button>提交</button></div>
<ul>
<li>Karma</li>
</ul>
</div>
);
}接下来按原来的Redux方式作一个store出来。
1.4 Redux的安装和使用（复习）
npm install --save redux首先创建一个store文件夹，在/store下创建一个index.js文件,并写入下面代码：
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store目前我们还没有reducer，所以要创建reducer.js文件，代码如下:
const defalutState = {
inputValue : 'Karma',
list :[]
}
export default (state = defalutState,action) =>{
return state
}然后再TodoList.js中的构造函数constructor中使用。
import React, { Component } from 'react';
//-----关键代码--------start
import store from './store'
//-----关键代码--------end
class TodoList extends Component {
//-----关键代码--------start
constructor(props){
super(props)
this.state = store.getState()
}
//-----关键代码--------end
render() {
return (
<div>
<div>
//-----关键代码--------start
<input value={this.state.inputValue} />
//-----关键代码--------end
<button>提交</button>
</div>
<ul>
<li>Karma</li>
</ul>
</div>
);
}
}
export default TodoList;到目前为止，只是安装了React-Redux,但是还并没有进行使用。
2.React-redux中provider和connect
2.1 提供器Provider介绍
<Provider>是一个提供器，只要使用了这个组件，组件里边的其它所有组件都可以使用store了，这也是React-redux的核心组件了。有了<Provider>就可以把/src/index.js改写成下面的代码样式。
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
//---------关键代码--------start
import { Provider } from 'react-redux'
import store from './store'
//声明一个App组件，然后这个组件用Provider进行包裹。
const App = (
<Provider store={store}>
<TodoList />
</Provider>
)
//---------关键代码--------end
ReactDOM.render(App, document.getElementById('root'));写完这个，去浏览器中进行查看，发现代码也是可以完美运行的。需要注意的是，现在还是用传统方法获取的store中的数据。有了Provider再获取数据就没有那么麻烦了。
2.2 connect连接器的使用
打开TodoList.js文件，引入connect，它是一个连接器（其实它就是一个方法），有了这个连接器就很容易的获得数据了。
import {connect} from 'react-redux' //引入连接器这时候暴露出去的就变成了connect了，代码如下。
export default connect(xxx,null)(TodoList);这里的xxx代表一个映射关系，目前还没有制作这个映射关系。
2.3 映射关系的制作
映射关系就是把原来的state映射成组件中的props属性，比如我们想映射inputValue就可以写成如下代码。
const stateToProps = (state)=>{
return {
inputValue : state.inputValue
}
}这时候再把xxx改为stateToProps
export default connect(stateToProps,null)(TodoList)然后把<input>里的state标签，改为props,代码如下:
<input value={this.props.inputValue} />TodoList.js的所有代码。
import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'
class TodoList extends Component {
constructor(props){
super(props)
this.state = store.getState()
}
render() {
return (
<div>
<div>
<input value={this.props.inputValue} />
<button>提交</button>
</div>
<ul>
<li>JSPang</li>
</ul>
</div>
);
}
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue
}
}
export default connect(stateToProps,null)(TodoList);3.React-redux的数据修改
3.1 编写onChange响应事件
打开TodoList.js文件，然后在<button>上加上onChange事件。
<input value={this.props.inputValue} onChange={this.inputChange.bind(this)} />有了事件需要编写对应的方法,这里先写一个最简单的inputChange方法。
inputChange(e){
console.log(e.target.value)
}然后到浏览器中的控制台就不再有报错，而且输入时可以打印出值。
3.2 编写DispatchToProps
要使用react-redux，可以编写另一个映射DispatchToProps,先看下面这段代码，你会发现有两个参数，第二个参数我们用的是null。
export default connect(stateToProps,null)(TodoList);DispatchToProps就是要传递的第二个参数，通过这个参数才能改变store中的值。
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
console.log(e.target.value)
}
}
}有了这个参数之后就可以把响应事件改成下面的代码.
<input value={this.props.inputValue} onChange={this.props.inputChange} />然后把connect第二个参数传递过去。
export default connect(stateToProps,dispatchToProps)(TodoList);这时候原来的inputChange方法就没用了，可以删除掉。
import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'
class TodoList extends Component {
constructor(props){
super(props)
this.state = store.getState()
}
render() {
return (
<div>
<div>
<input value={this.props.inputValue} onChange={this.props.inputChange} />
<button>提交</button>
</div>
<ul>
<li>Karma</li>
</ul>
</div>
);
}
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue
}
}
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
console.log(e.target.value)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);3.3 派发action到store中
映射关系已经做好了，接下来只要进行action的派发和reducer对业务逻辑的编写就可以了。派发action和以前的流程一样。
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
}
}
}派发后就需求在reducer里边，编写对应的业务逻辑了。
const defalutState = {
inputValue : 'jspang',
list :[]
}
export default (state = defalutState,action) =>{
if(action.type === 'change_input'){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
return state
}4.React-redux增加List数据
4.1 给按钮增加点击事件
直接在/src/TodoList.js里的Button增加一个onClick事件，代码如下:
<button onClick={this.props.clickButton}>提交</button>注意这里依然使用的props，也就是说还需要把方法写在dispatchToProps里。我们这里先写一个测试，看看是否绑定上了。
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
},
clickButton(){
console.log('test')
}
}
}写完clickButton方法后，在浏览器中预览，打开浏览器的控制台看一下结果，应该在点击时，可以看到显示test。 这步完成，就是用dispatch派发action了。
clickButton(){
let action = { type:'add_item' }
dispatch(action)
}4.2 编写Reducer的业务逻辑
派发完成后,到Reducer编写业务逻辑，这一步和以前的操作基本一样。
const defalutState = {
inputValue : 'karma',
list :[]
}
export default (state = defalutState,action) =>{
if(action.type === 'change_input'){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
//----关键代码------start---------
if(action.type === 'add_item'){
let newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
//----关键代码------end---------
return state
}4.3 页面UI部分的制作
然后到TodoList.js中进行JSX部分的编写，编写前需要先把stateToProps`的映射关系做好。
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list:state.list
}
}有了映射关系，就可以再界面中用属性的方式，进行显示，代码如下：
<ul>
{
this.props.list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>这样就实现了增加TodoList的列表项。
import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'
class TodoList extends Component {
constructor(props){
super(props)
this.state = store.getState()
}
render() {
return (
<div>
<div>
<input value={this.props.inputValue} onChange={this.props.inputChange} />
<button onClick={this.props.clickButton}>提交</button>
</div>
<ul>
{
this.props.list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list:state.list
}
}
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
},
clickButton(){
let action = {
type:'add_item'
}
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);5.React-redux程序优化
5.1 用结构复制精简代码
现在代码中有好几处this.props都是重复的，这时候就可以用javascript的解构赋值方法，来精简代码。修改TodoList.js中的Render函数，把原来带代码修改为下面的代码:
render() {
let {inputValue ,inputChange,clickButton,list} = this.props;
return (
<div>
<div>
<input value={inputValue} onChange={inputChange} />
<button onClick={clickButton}>提交</button>
</div>
<ul>
{
list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}5.2 把TodoList改为UI组件-提高性能
可以看到，现在的TodoList组件里没有任何的业务逻辑，只有一个Render方法，这时候就可以把它改为UI组件(无状态组件)，UI组件就是一个方法，减少很多冗余操作，从而提高程序运行性能。这时候重新声明一个TodoList的变量，然后把render函数里的东西复制过来，只要稍加修改，就可以得到下面的代码：
const TodoList =(props)=>{
let {inputValue ,inputChange,clickButton,list} = props; // 粘贴过来后，此处要进行修改
return (
<div>
<div>
<input value={inputValue} onChange={inputChange} />
<button onClick={clickButton}>提交</button>
</div>
<ul>
{
list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}代码写完后，我们删除一些不用的引入，然后就可以到浏览器中进行预览了。
import React from 'react';
import {connect} from 'react-redux'TodoList.js的所有代码。
import React from 'react';
import {connect} from 'react-redux'
const TodoList =(props)=>{
let {inputValue ,inputChange,clickButton,list} = props; // 粘贴过来后，此处要进行修改
return (
<div>
<div>
<input value={inputValue} onChange={inputChange} />
<button onClick={clickButton}>提交</button>
</div>
<ul>
{
list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list:state.list
}
}
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
},
clickButton(){
let action = {
type:'add_item'
}
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);然后，再来理解一下最后一句话代码的意思。
export default connect(stateToProps,dispatchToProps)(TodoList);connect的作用是把UI组件（无状态组件）和业务逻辑代码的分开，然后通过connect再链接到一起，让代码更加清晰和易于维护。这也是React-Redux最大的优点。
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！