关于前端:React生态篇如何使用reactredux

一，介绍

React-Redux 是沟通 React 和 Redux 的桥梁，它次要性能体现在如下两个方面：

1. 在根组件中承受 Redux 的 Store，并把它正当调配到所须要的组件中。
2. 组件实例订阅 Store 中 state 的扭转，促使生产对应的 state 的组件更新。

装置：
npm install –save react-redux

二，应用

React-Redux中提供了一个重要的Provider组件和一个高阶组件connect。
1,Provider
redux 提供给react数据层，然而数据可能会被很多组件应用，provider就能够把redux中提供的store在全局中注入。其作用就是保留redux中的store，调配给所有有须要store中数据的子组件。
用法：

export default function Root() {
  return (
    <Provider store={Store}>
      <Index />
    </Provider>
  );
}

2,connect
connect能够了解为Provider的消费者。能够利用connect 提供的性能，做数据获取，数据通信，状态派发等操作。
connect高价组件调用后，组件将领有以下性能：
1,可能从props中获取扭转Store中state的办法：Store.dispatch
2,如果 connect 有第一个参数，那么会将 redux Store state 中的数据，映射到以后组件的 props 中，子组件能够应用生产。
3,当须要的Store中的 state ，有变动的时候，会告诉以后组件更新，从新渲染视图。
用法:

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

参数mapStateToProps：对须要应用Store中state的业务组件，将Store中的数据映射到该业务组件中，Store中的state扭转触发业务组件中的props扭转，对应业务组件的视图会更新。当没有该参数时，以后业务组件不会被订阅
用法：

const mapStateToProps = (state) => ({ number: state.number });

参数mapDispatchToProps： 将redux 中的 dispatch 办法，映射到业务组件的 props 中。

const mapDispatchToProps = (dispatch) => {
  return {
    numberAdd: () => dispatch({ type: "ADD" }),
    setInfo: () => dispatch({ type: "SET" })
  };
};

dispatch别离会调用reducer中对应type的操作。

参数mergeProps：

• stateProps , state 映射到 props 中的内容
• dispatchProps， dispatch 映射到 props 中的内容。
• ownProps 组件自身的 props

用法：

(stateProps, dispatchProps, ownProps) => Object

失常状况下，如果没有这个参数，会依照如下形式进行合并，返回的对象能够是，能够自定义的
合并规定，还能够附加一些属性。
{ …ownProps, …stateProps, …dispatchProps }
参数options: 类型为对象传入

context?: Object, // 自定义上下文
 pure?: boolean, // 默认为 true , 当为 true 的时候 ，除了 mapStateToProps 和 props ,其余输出或者state 扭转，均不会更新组件。
 areStatesEqual?: Function, // 当pure true , 比拟引进store 中state值 是否和之前相等。 (next: Object, prev: Object) => boolean
 areOwnPropsEqual?: Function, // 当pure true , 比拟 props 值, 是否和之前相等。 (next: Object, prev: Object) => boolean
 areStatePropsEqual?: Function, // 当pure true , 比拟 mapStateToProps 后的值 是否和之前相等。 (next: Object, prev: Object) => boolean
 areMergedPropsEqual?: Function, // 当 pure 为 true 时， 比拟 通过 mergeProps 合并后的值 ， 是否与之前等 (next: Object, prev: Object) => boolean
 forwardRef?: boolean, //当为true 时候,能够通过ref 获取被connect包裹的组件实例。

三，示例

1,新建store文件
在我的项目目录src下新建Redux的Store目录(store文件夹)并新建index.js和reducer.js文件
在index.js中咱们创立Store数据贮存仓库

import { createStore, applyMiddleware, compose } from "redux"; // 引入createStore办法
import reducer from "./reducer";

const store = createStore(reducer); // 创立数据存储仓库

export default store;

创立完Store，咱们能够先在我的项目index.js中先引入，应用Provide派发

import { StrictMode } from "react";
import ReactDOM from "react-dom";

// import App from "./React-redux-demo/demo02";
import CompA from "./React-redux-demo/compA";
import CompB from "./React-redux-demo/compB";
import { Provider } from "react-redux";
import store from "./store";
const App = (
  <Provider store={store}>
    {/* <Index /> */}
    <CompA />
    <CompB />
  </Provider>
);
{
  /* <StrictMode>
<App />
</StrictMode>, */
}
const rootElement = document.getElementById("root");
ReactDOM.render(App, rootElement);

创立compA和compB子组件，并在根组件中引入，如上

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";

function ComponentA({ toCompB, compBsay }) {
  const [CompAsay, setCompAsay] = useState("");
  return (
    <div className="box">
      <p>我是组件A</p>
      <div> B组件对我说：{compBsay} </div>
      我对B组件说：
      <input
        placeholder="CompAsay"
        onChange={(e) => setCompAsay(e.target.value)}
      />
      <button onClick={() => toCompB(CompAsay)}>确定</button>
    </div>
  );
}
/* 映射state中CompBsay  */
const CompAMapStateToProps = (state) => ({ compBsay: state.info.compBsay });
/* 映射toCompB办法到props中 */
const CompAmapDispatchToProps = (dispatch) => ({
  toCompB: (mes) => {
    dispatch({ type: "SET", payload: { compAsay: mes } });
  }
});
/* connect包装组件A */
export default connect(
  CompAMapStateToProps,
  CompAmapDispatchToProps
)(ComponentA);

import { Component } from "react";

import { connect } from "react-redux";
class ComponentB extends Component {
  state = { compBsay: "" };
  handleToA = () => {
    this.props.dispatch({
      type: "SET",
      payload: { compBsay: this.state.compBsay }
    });
  };
  render() {
    return (
      <div className="box">
        <p>我是组件B</p>
        <div> A组件对我说：{this.props.compAsay} </div>
        我对A组件说：
        <input
          placeholder="CompBsay"
          onChange={(e) => this.setState({ compBsay: e.target.value })}
        />
        <button onClick={this.handleToA}>确定</button>
      </div>
    );
  }
}
/* 映射state中 CompAsay  */
const CompBMapStateToProps = (state) => ({ compAsay: state.info.compAsay });
export default connect(CompBMapStateToProps)(ComponentB);

在reducer.js中咱们创立Store须要贮存的State数据

//定义初始state
const defaultState = {
  number: 2,
  info: {
    compAsay: "",
    compBsay: ""
  }
};

//深拷贝
function deepClone(obj) {
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

export default (state = defaultState, action) => {
  // #reducer里只能承受state 不能扭转state
  if (action.type == "SET" && action.payload.compAsay) {
    let newState = deepClone(state);  //深拷贝state
    newState.info.compAsay = action.payload.compAsay;
    return newState;
  }
  if (action.type == "SET" && action.payload.compBsay) {
    let newState = deepClone(state);
    newState.info.compBsay = action.payload.compBsay;
    return newState;
  }
  return state;
};