P20:Redux进阶-React-redux中的Provider和connect

灰太狼 2023-10-06 20:57 83阅读 0赞

#### Redux 进阶 ####

*  阐述
 *  Provider 提供器讲解
 *  connect 连接器的使用
 *  映射关系的制作
 *  React-redux 的数据修改
 *   *  编写onChange响应事件
     *  编写DispatchToProps
     *  派发action到store中

## 阐述 ##

上篇文章我们已经完成了 `React-redux` 开发 `TodoList` 组件的基本环境。  
现在就可以开始学习React-redux了，本文主要学习一下 `Provider 和 connect` 这两个知识点。

## 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` 再获取数据就没有那么麻烦了。

## connect 连接器的使用 ##

现在如何简单的获取 `store` 中数据那？  
先打开 `TodoList.js` 文件，引入`connect`，它是一个连接器（其实它就是一个方法），有了这个连接器就可以很容易的获得数据了。

// 引入连接器
    import {
        connect} from 'react-redux'

这时候暴露出去的就变成了 `connect`了。

代码如下：

export default connect(xxx,null)(TodoList);

这里的 `xxx` 代表一个映射关系，目前还没有制作这个映射关系。

## 映射关系的制作 ##

映射关系就是把原来的 `state` 映射成组件中的 `props` 属性，比如我们想映射 `inputValue` 就可以写成如下代码。

const stateToProps = (state)=>{
        
        return {
        
            inputValue : state.inputValue
        }
    }

这时候再把 `xxx` 改为 `stateToProps`

export default connect(stateToProps,null)(TodoList)

然后把 `<input>` 里的 `state` 标签，改为 `props`，代码如下:

为了方便你学习，我这里给出所有的 `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>willem</li>
                    </ul>
                </div>
                );
        }
    }
    
    const stateToProps = (state)=>{
        
        return {
        
            inputValue : state.inputValue
        }
    }
    
    export default connect(stateToProps,null)(TodoList);

写完之后再到浏览器中查看一下，发现我们映射的关系也是可以用的。

以上就是 `React-Redux` 插件的使用重点，你需要多写几遍，把这个流程记在心里。  
先到这里，下篇文章我们继续实现`TodoList`组件。

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

当修改`<input>`中的值时，去改变`store`数据，UI界面也随之进行改变。

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

打开 `TodoList.js`文件，然后在`<button>`上注册`onChange`事件，这里我就偷懒直接绑定this了。

这里先编写一个最简单的 `inputChange` 方法。

inputChange(e){
        
        console.log(e.target.value)
    }

然后到浏览器中的控制台就不再有报错，而且输入时可以打印出值，这说明我们的绑定成功了。

这步完成我们要改为react-redux的了。

### 编写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`方法就没用了，可以删除掉。

目前整体的代码就改为下面的样子了，我们在浏览器中预览也是可以看到效果的。此步骤成功说明映射关系支持成功。

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>willem</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);

![在这里插入图片描述][9ce884db8bea4e4ea7e3cf6f21a06385.gif_pic_center]

### 派发action到store中 ###

映射关系已经做好了，接下来只要进行action的派发和reducer对业务逻辑的编写就可以了。派发action和以前的流程一样，我就直接给出代码了。

`demo02\src\TodoList.js`

const dispatchToProps = (dispatch) =>{
        
        return {
        
            inputChange(e){
        
                let action = {
        
                    type:'change_input',
                    value:e.target.value
                }
                dispatch(action)
            }
        }
    }

派发后就需求在reducer里边，编写对应的业务逻辑了。

`demo02\src\store\reducer.js`

const defalutState = {
        
        inputValue : 'Default value willem',
        list :[]
    }
    
    const arrowFun = (state = defalutState,action) =>{
        
        if(action.type === 'change_input'){
        
            let newState = JSON.parse(JSON.stringify(state))
            newState.inputValue = action.value
            return newState
        }
        
        return state
    }
    
    export default arrowFun;

这样就算整个修改过程完成了，到浏览器中查看一下，应该就实现了改变`input`框的效果。

这个流程你刚开始学会觉的很绕，但是你作的多了，你就会发现它很简单，就是一个模式，而且会降低程序出错的机率。

建议这个流程你至少要写5遍以上，据我所知，几乎所有公司用react都会用到react-redux，所以这个流程重要性不次于Redux的流程，一定要熟练掌握。

[9ce884db8bea4e4ea7e3cf6f21a06385.gif_pic_center]: https://img-blog.csdnimg.cn/9ce884db8bea4e4ea7e3cf6f21a06385.gif#pic_center