react-redux的原理，react-redux的使用

1.react-redux的原理

// react-redux/context.js

import { createContext } from "react";

const StoreContext = createContext(null);

export { StoreContext };

// react-redux/connect.js

import React, { Component } from "react";
import { StoreContext } from "./context";

// connect函数返回一个函数
function connect(mapStateToProps, mapDispatchToProps) {
  // 返回的函数是个高阶组件
  return function (WrapComponent) {
    class EhanceComponent extends Component {
      constructor(props, context) {
        super(props, context);
        this.state = {
          storeContext: mapStateToProps(context.getState()),
        };
      }

      componentDidMount() {
        // 监听store的变化，更新state，渲染页面
        this.unsubscribe = this.context.subscribe(() => {
          this.setState({
            storeContext: mapStateToProps(this.context.getState()),
          });
        });
      }

      // 组件卸载去除监听
      componentWillUnmount() {
        this.unsubscribe();
      }

      render() {
        return (
          <WrapComponent
            {...this.props}
            {...mapStateToProps(this.context.getState())}
            {...mapDispatchToProps(this.context.dispatch)}
          />
        );
      }
    }

    EhanceComponent.contextType = StoreContext; //设置上下文context

    return EhanceComponent;
  };
}

export { connect };

2.react-redux的使用

// App.js

import "./App.less";
import Contxt from "./test/context";
import TState from "./test/state";
import TShouldUpdate from "./test/shouldUpdate";
import TRef from "./test/ref";
import TStyled from "./test/styled";
import TClass from "./test/classnames";
import TAntd from "./test/antd";
import TRtredux from "./test/rtredux";
import TThunk from "./test/thunk";
import TSaga from "./test/saga";
import store from "./test/store";
import { Provider } from "react-redux"; // 引入Provider，设置store进行传递

function App() {
  return (
    <Provider store={store} className="App">
      <Contxt></Contxt>
      <TState></TState>
      <TShouldUpdate></TShouldUpdate>
      <TRef />
      <TStyled />
      <TClass />
      <TAntd />
      <TRtredux />
      <TThunk />
      <TSaga />
    </Provider>
  );
}

export default App;

// react-redux的使用页面

import React, { Component } from "react";
import { connect } from "react-redux";
import { countAction } from "./store/count";
import { Button } from "antd";

export class TRtredux extends Component {
  render() {
    return (
      <>
        <hr />
        <h3>自定义react-redux</h3>
        <p>{this.props.count}</p>
        <Button type="ghost" onClick={() => this.props.changeCount(5)}>
          操作redux
        </Button>
      </>
    );
  }
}

const mapStateToProps = (state) => ({
  count: state.countInfo.count,
});

const mapDispatchToProps = (dispatch) => ({
  changeCount(num) {
    dispatch(countAction.changeMore(num));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(TRtredux);

// store/count/index.js

import countReducer from "./reducer";
import * as countAction from "./action";
import * as countConst from "./constant";

export { countReducer, countAction, countConst };


// store/count/constant.js

export const CHANGENUMBER= "CHANGENUMBER";


// store/count/action.js

import { CHANGENUMBER } from "./constant";

export const changeMore = (number) => ({ type: CHANGENUMBER, number });


// store/count/reducer.js

import { CHANGENUMBER } from "./constant";

const countInfo = {
  count: 0,
};

// reducer是纯函数 结合state和action，返回新的state
function changeCounter(state = countInfo, action) {
  switch (action.type) {
    case CHANGENUMBER:
      return { ...state, count: state.count + action.number };
    default:
      return state;
  }
}

export default changeCounter;