Redux、React-Redux初识（区别以及详细使用方法）

本文主要针对当前两项的使用进行讲解，对于概念性的东西，浏览的同学如果有不是很懂得地方，可以通过其他方式进行补充

---

以下代码可以直接复制于本地进行运行，查看效果

项目简介：

通过Umi的脚手架进行项目初始化(（umijs/max），为antd ts版本

如果对umi比较陌生的可以移步(http://t.csdn.cn/OMNDI),在此文中，有详细介绍

注意：

        node版本需要相对较高，否则可能启动项目报错

        Redux，React-Redux此两项，项目中如果不具备，需要手动进行安装

---

redux使用：

/**
 * 如果项目当中没有安装redux，需要默认进行安装 cnpm install redux --save
 * 核心：createStore,getState,dispatch,subscribe
 */
const { createStore } = require('redux');

//定义常量动作标识
const ADD_COUNT = 'ADD_COUNT'

//定义静态state数据集
let initialState = {
  count: 0,
};

/**
 * 定义reducer
 * @param {Object} state 定义存储state的数据
 * @param {Object} action action内容{type:为动作触发标识类型,v:第二个值为随路传递进来的数据}
 */
function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_COUNT://此处的case值需要对应的后续动态触发action的唯一标识[必须一致]
      return { count: action.vls + state.count };
      break;
    default:
      return state;
  }
}

/**
 * 创建store仓库，并将reducer传入初始化
 */
const store = createStore(reducer);

export default function ReduComponent() {
  /**
   * 监听state当中数据的变化，实时检测，如果了解vue，可以对比computed进行理解
   */
  store.subscribe(() => {
    console.log(store.getState());
  });
  /**
   * 通过自定义事件进行触发action，从而联动reducer进行计算
   * 注意：
   *    1.此处为了减少冗余代码的展示，将action的内容直接放置于自定义的function当中，
   *    2.dispatch中的对象入参，type为action的类型，对标reducer中的case值，需要进行一对一匹配
   */
  const handleChangeCount = () => {
    /**
     * dispatch触发action动作，值为Object，第一个为联动reducer的唯一key标识，第二个字段为自定义的数据
     */
    store.dispatch({ type: ADD_COUNT, vls: 123 });
  };
  return (
    <>
      <button onClick={handleChangeCount}>点击增加数据</button>
    </>
  );
}

---

React-Redux使用：

由于react-redux相对redux来说麻烦一些，故而分为了几个模块的内容进行处理

其中store的代码量比较分散，切相对内容较少，故而采用截图的方式来展示

---

整体的项目结构为：

store (仓库，包含store初始化，action,reducer)

component (视图组件)

        视图组件包含两部分，为了方便Provider组件进行包裹

        第一部分为入口视图(ReactReduxIndex.tsx)，进行模拟根节点（路由指向该组件，其中引入嵌套UI视图组件）

        第二部分为UI视图，进行业务组件处理(ReactReduxComponent.tsx)

仓库视图：

 暴露入口视图（ReactReduxIndex.tsx）：

/*
 * @Description: 对应
 * @Author: Renmr
 * @Date: 2023-07-19 15:22:41
 */
import React from 'react';
import store from '@/store';
import { Provider } from 'react-redux';
import ReactReduxComponent from './ReactReduxComponent';
/**
 * 该组件存在主要是为了模拟演示，Provider 中挂载store
 */
export default class App extends React.Component {
  render() {
    return (
      /**
       * 此步骤相对比较关键，如果此处没有将store挂载成功，则在视图组件使用connect进行连接时，
       * 将会有异常报错，所以务必确保该项存在
       */
      <Provider store={store}>
        <ReactReduxComponent />
      </Provider>
    );
  }
}

实际交互UI组件视图（ReactReduxComponent.tsx）：

/**
 * 如果项目当中没有安装react-redux，需要默认进行安装 cnpm install react-redux --save
 * 需要注意，不同于redux，两者有区别
 * 注意：
 *  1.容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
 *  2.必须先将store进行挂载于Provider标签中，且该标签必须位于初始根节点
 *  3.
 */

//action方法
import { ADD_COUNT_ACTION } from '@/store/action';

import { Component } from 'react';
import { connect } from 'react-redux';
/**
 * 用于映射state里面静态数据，将数据和当前的视图组件进行关联
 * @param {Object} state state中的所有数据
 * @returns {Object} 返回一个数据集合对象(返回的对象中的key作为传递给UI组件props的key，value作为传递给UI组件的props的value)
 */
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

/**
 * 用于映射reducer中的方法，来触发
 * @returns {Object} 返回对象
 */
const mapDispatchToProps = (dispatch) => {
  return {
    addFun: () => dispatch(ADD_COUNT_ACTION(100)),
  };
};

class ReactReduxComponent extends Component {
  render() {
    /**
     * 【核心】
     * 当使用react-redux以后，store中reducer中的方法，以及state的变量，都需要从props中进行获取，
     * 派发action通过mapDispatch中的映射方法进行触发
     */
    const { addFun, count } = this.props;
    return (
      <>
        {/* 此处的count可以直接获取实时的数据内容 */}
        <span>更新后的数据内容：{count}</span>
        <button onClick={addFun}>测试点击事件</button>
      </>
    );
  }
}

/**
 * connect该方法由react-redux提供，用于将组件和store中的数据状态进行联动
 * 需要特别注意：在此操作之前，需要先将store挂载于Provider标签中，需将此标签置于根节点中
 */
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ReactReduxComponent);

 优化方案：

 后续可延续此两项继续拓展的功能如下：

reducer的合并(combineReducers)

异步action的处理方案(redux-thunk,redux-saga)[applyMiddleware]

---

再深一层就可以将Dva代入项目进行更简洁化的操作

        在使用dva之前，需要先自行了解下，react hooks,ES6的generator函数使用方式，redux-saga交互方式