React-redux组件使用

你的名字 2022-11-21 01:04 142阅读 0赞

#### 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`,代码如下:

`TodoList.js`的所有代码。

#### 3.React-redux的数据修改 ####

##### 3.1 编写`onChange`响应事件 #####

打开`TodoList.js`文件，然后在`<button>`上加上`onChange`事件。

有了事件需要编写对应的方法,这里先写一个最简单的`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)
            }
        }
    }

有了这个参数之后就可以把响应事件改成下面的代码.

然后把connect第二个参数传递过去。

export default connect(stateToProps,dispatchToProps)(TodoList);

这时候原来的`inputChange`方法就没用了，可以删除掉。

##### 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`事件，代码如下:

注意这里依然使用的`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`最大的优点。

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/29/35%20React-redux%E7%BB%84%E4%BB%B6/
[Link 1]: https://github.com/kay-520/React_study