状态管理（2）- react-redux

在阅读之前，建议先看状态管理1

react-redux 是redux官方推出的，它能够使你的React组件从Redux store 中很方便的读取数据，并且向store中分发actions以此来更新数据。

react-redux 两个重要的成员：

Provider: 它是一个组件，一般包裹在根组件外面，能够使得你的整个app能获取到store中的数据
Connect：这个方法能够是我们的组件和store关联
Connect - 参数说明
有四个参数，两个比较重要：mapStateToProps (state, ownProps) 和 map DispatchToProps (dispatch, ownProps) ; 和两个不常用的mergeProps(stateProps, dispatchProps, ownProps) 和 options

1. 参数 mapStateToProps：类型 function； 这个函数允许我们将store中的数据作为props绑定到组件上；例如 mapStateToProps(state, ownProps) state: redux 中的store； ownProps： 自己的props； （用于接收action）
2. mapDispatchToProps(stateProps, dispatchProps, ownProps) 类型： function， 将action作为props绑定到我们自己的函数中，参数：dispatch： 就是store.dispatch() ownProps: 自己的props（用于发送action）

实现一个计数器的例子，来熟悉一下react-redux
初始值为10， 每点一次+， 增加1

image.png

我们将通过两个组件来实现，组件A展示+号按钮， 组件B展示数值， 点击组件A的加号 实现组件B的数据+1

脚手架创建react项目

npx create-react-app redux-demo

安装react-redux

yarn add react-redux

利用redux来构建store

1. 在src目录下创建 reducer文件夹，在reducer文件夹下添加index.js 文件，构建reducer来响应actions
   reducer接收两个参数，第一个参数是state， 第二个参数是action

// 首先定一个state 的初始值
const initState = {
    count: 10
};
// reducer 需要接受action 然后进行逻辑处理 
// 判断发送过来的action是不是我们需要的
// 如果是我们需要的，就应该return一个新的state
exports.reducer = (state = initState, action) => {
    switch(action.type){
        case 'add_action':
            return {
                count:state.count + 1
            };
        default:
            return state;
    }
}

2. 在src目录下创建store/index.js 文件，通过createStore方法，把reducer传进来

//  首先需要导入一下createStore 这个方法
import { createStore } from 'redux';
import { reducer } from '../reducer'

// 导入reducer的处理函数 ， 构建一个store
// 可以直接将这个store导出
export default createStore(reducer);

上面的两个步骤我们创建了reducer 和 store， 你可能会疑惑action 去哪里了？ 一步步来，我们将把action放到对应的组件中

引入Provider组件

1. 在app.js中引入Provider组件

import { Provider } from 'react-redux

2. 利用Provider组件将我们整个结构进行包裹，并且传递给store

function App() {
  return (
    
    
...
    
  );
}

新建组件

在src文件夹下新建page目录，在page目录下新建ComA 和 ComB 文件夹， ComA组件放加号，ComB组件放数值

ComA 组件

• 在ComA下新建index.js

import React from 'react';
class ComA extends React.Component{
    render(){
        return(
             + 
        )
    }
}
export default ComA;

• 引入connect ， Provider只是维护store，connect 才是将组件和store关联起来的

import {connect} from 'react-redux';

• 在开头我们将来connect的两个比较重要的参数：mapStateToProps (state, ownProps) 和 mapDispatchToProps (dispatch, ownProps) ;
  mapStateToProps 是将store中的数据作为props绑定到组件上
  mapDispatchToProps 是将action作为props绑定到组件上
  这里我们的组件A是+号按钮，是事件发送方，所以不需要第一个参数，只需要实现第二个参数，也就是mapDispatchToProps
  下面让我们实现mapDispatchToProps 它是一个函数，有两个参数
  第一个参数：dispatch： 就是store.dispatch() ownProps: 自己的props（用于发送action）

/**
 *  这个函数要有一个返回值，返回值是一个对象
 * @param {*} dispatch 
 * @returns 
 */
const mapDispatchToProps = (dispatch) => {
    return {
        sendAction:()=>{
            // 利用dispatch 发送一个 action 
            // action对象必须有type属性
            dispatch({
                type:'add_action'
            })
        }
    }
}

• 将组件和 mapDispatchToProps 用connect绑定，并为按钮添加点击事件， 点击事件就是从mapDispatchToProps return出来的方法
  ComA完整代码：

import React from 'react';
// 导入connect
import {connect} from 'react-redux';

class ComA extends React.Component{
    handleClick = () => {
        console.log(this.props,'ppp')
        // 把sendAction传过来了
        // 这里我们就发送action
        this.props.sendAction();
    }
    render(){
        return(
             + 
        )
    }
}
/**
 *  这个函数要有一个返回值，返回值是一个对象
 * @param {*} dispatch 
 * @returns 
 */
const mapDispatchToProps = (dispatch) => {
    return {
        sendAction:()=>{
            // 利用dispatch 发送一个 action 
            // action对象必须有type属性
            dispatch({
                type:'add_action'
            })
        }
    }
}

// 组件A是发送方， 所以要实现第二个参数
export default connect(null, mapDispatchToProps)(ComA)

ComB 组件

ComB用于显示数值，它是接受state的，所以只要实现connect中的mapStateToProps ， 它store中的数据作为props绑定到组件上， 这里我们定义 mapStateToProps， 让它直接将state返回， 那么组件B中就能直接使用props中的数值

import React from 'react'
// 导入connect
import { connect  } from 'react-redux'
class ComB extends React.Component{
    render(){
        return (
            
{this.props.count}
        )
    }
}

/**
 *  接受两个参数
 * @param {*} state 
 */
const mapStateToProps = (state) => {
    return state;
}
export default connect(mapStateToProps)(ComB)

最后将ComA 和 ComB 引入app.js 中

app.js 完整代码

import './App.css';
import store from './store'
// 导入Provider组件，利用这个组件包裹我们的结构，从而能够达到统一维护store的效果
import {Provider} from 'react-redux'
import ComA from './page/ComA'
import ComB from './page/ComB'
// 导入store
function App() {
  return (
    
    

      
      
    
    
  );
}

export default App;

以上就完成了一个简单的计数器