react-redux

安装相关依赖

yarn add redux
yarn add react-redux

A,构建 store 和 reducer

1. 创建 reducer/index.js 文件，构建 reducer来响应 actions
2. 创建 store/index.js 文件，通过 createStore 方法，把我们的reducer传入进来
3. 在 app.js 中引入 store

B,搭建页面结构

1. 创建一个组件，名字叫ComA，里面放一个 button 按钮
2. 创建另外一个组件，名字叫 ComB，里面放一个 div，用来显示数字
3. 在 app.js 中引入 两个组件

Provider 组件实现

1. 导入 Provider组件， 在 react-redux中进行导入
2. 需要利用 Provider组件 对我们整个结构进行包裹
3. 给我们Provider组件设置 store 的属性，而这个值就是我们通过 createStore构建出来的 store 实例对象

ComA 发送 action

1. 导入 connect
2. 利用 connect 对组件进行加强
   connect(要接受数组的函数，要发送action的函数)(放入要加强的组件)
3. 我们需要实现 connect 第二个参数
4. 构建了一个函数 mapDispatchToProps(dispatch)
   dispatch: 就是用来发送给 action的
5. 在这个函数里面就可以返回一个对象
   key 是方法名
   value: 调用 dispatch 去发送action
6. 在组件的内容 就可以通过 this.props 来拿到这个方法了

ComB 接受 state

1. 导入 connect 方法
2. 利用 connect 对组件进行加强
3. ComB属于是接收方，就需要实现 connect的第一个参数
4. mapStateToProps 里面的一个参数就是我们很关心 state
5. 把这个 state 进行 return 才能在组件的内部获取到 最新的数据
6. ComB 是否能拿到数据，关键点 是 reducer
7. 只有 reducer里面返回了新的state的时候，我们才能够获取到

//1. reducer/index.js
  /** 接收两个参数 第一个参数是 state  第二个参数是 action */
  const initState = {
    count: 0
  };
  // reducer 要接受action 然后进行逻辑处理的
  // 判断 发送过来的action 是不是我们需要的
  // 如果是我们需要的，就应该 return 一个新的 state了
  exports.reducer = (state = initState, action) => {
    console.log("reducer:", action);
    switch (action.type) {
      case "add_action":
        return {
          count: state.count + 1
        };
      default:
        return state;
    }
  };

// 2.store/index.js
  import { createStore } from "redux";
  // 导入我们自己的reducer 处理函数
  import { reducer } from "../reducer";
  // 构建 store
  export default createStore(reducer);

// 3.app.js
  import React from "react";
  import "./App.css";
  // 导入我们的 store
  import store from "./store";
  // 导入Provider组件，利用这个组件包裹我们的结构，从而能够达到统一维护 stroe 的效果
  import { Provider } from "react-redux";
  // 引入 组件 A
  import ComA from "./pages/ComA";
  // 引入 组件 B
  import ComB from "./pages/ComB";
  function App() {
    return (
      <Provider store={store}>
        <div className="App">
          <ComA />
          <ComB />
        </div>
      </Provider>
    );
  }
  export default App;

// 4.ComA
  import React from "react";
  // 导入 connect
  import { connect } from "react-redux";
  class ComA extends React.Component {
    handleClick = () => {
      console.log("ComA:", this.props);
      // 发送 action
      this.props.sendAction()
    };
    render() {
      return <button onClick={this.handleClick}> + </button>;
    }
  }
  /**
   * 这个函数要有一个返回值,返回值是一个对象
   * @param {*} dispatch
   */
  const mapDispatchToProps = dispatch => {
    return {
      sendAction: () => {
        console.log(123)
        // 利用 dispatch 发送一个 action
        // 传递action 对象 我们要定义一个 type属性
        dispatch({
          type: "add_action"
        });
      }
    };
  };
  // A是 发送方，所以要实现 connect 第二个参数
  export default connect(null, mapDispatchToProps)(ComA);

// 5.ComB
  import React from "react";
  // 导入 connect
  import { connect } from "react-redux";
  class ComB extends React.Component {
    render() {
      console.log("ComB:", this.props);
      return <div>{this.props.count}</div>;
    }
  }
  /**
   * 接受 两个参数
   */
  const mapStateToProps = state => {
    console.log("ComB1:", state);
    return state;
  };
  // B组件属于是 接收方，那么需要实现 connect 方法的第一个参数
  export default connect(mapStateToProps)(ComB);