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-redux
1.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 协议 ,转载请注明出处!

Git常用命令 上一篇
13 Redux中间件-thunk和saga 下一篇