React使用redux流程和介绍 简化处理方案

redux 很火，但是稍有些笨重。平时我们开发很少用到，一般使用dva、mobx或者更加轻便的recoil等等。但是要会redux 或 react-redux

官网：

Redux中文文档：https://www.redux.org.cn/

引用：

npm install --save redux
或
cnpm install --save redux
或
yarn add redux

说明下：我不喜欢官网方式定义太麻烦，简写了一种，非主流用法。
封装定义：action里面各种判断、dispatch各种对应处理方法。状态管理器就应该纯粹全局使用，而不是各种计算、异步调用、非函数方法等使用。
若需要自定义action里面进行一些操作，比如：接口调用等、不喜欢的跳过，直接看主流方式说明。

.

【1】个人简化版 使用： 不喜欢的直接看 【2】

src / store / index.js

// 1.导入redux方法
import { createStore } from "redux"

// 2.定义初始化state变量
import initialState from './initialState';

// 3.定义reducer - 【改造 - 封装处理，就这几行，新参数不需要额外定义处理】
function reducer(state = initialState, action) {
  const { type, data } = action;
  return {
    ...state,
    [type]: data
  }
}

// 4.创建store
const store = createStore(reducer);

// 5.封装actions派发 - 【改造 - 封装处理，就这几行，新参数不需要额外定义处理】
const dispatch = (key, data) => {
  store.dispatch({
    type: key, // type 当做reducer的 key
    data // data 当做reducer的 更新值
  })
}

export { store, dispatch };

这一块代码不会随着 新增变量 而改动，不管是 几条变量、几十条，还是几百条。只要不分包就不需要改动。

• 封装reducer，新增变量不需要改动或者定义
• 封装actions，新增变量不需要改动或者新增定义
• 新增redux状态值，只需要新增一条initialState的初始声明
• 若几十上百个状态值时，只需要新增几十行初始值定义即可，不需要新增：reducer和actions部分

src / store / initialState.js

// 定义 initialState 初始化值
const initialState = {
  demo: false,
  num: 0,
};

export default initialState;

调用：

调用方式一：单个组件引用redux

// src / views / demo / index.js
import React from "react";
import { store, dispatch } from '../../store'

export default function () {
    function handleAction() {
        let num = store.getState()?.num || 0;
        // 派发数据dispatch(key, value); 
        // key 当做reducer的 key // value 当做reducer的 更新值
        dispatch('num', num + 1);
        dispatch('demo', true);
        console.log(store.getState()); // {num: 0, demo: false} => {num: 1, demo: true}
    }

    return (
        <div onClick={handleAction}>点击更改redux</div>
    );
};

简化点说明：

• 1.简化适用一般项目，直接赋值，将redux变得纯粹干净。
• 2.action的type作更新的key，统一变量data作为更新值
• 3.新增redux变量只要在 initialState 新增变量即可，不需要其他操作

调用方式二：App.js 中 定义 Route属性

这是 redux，没有引用react-redux。没法做在 顶层props上面，可以做在路由组件里面，这样在每个父级页面的 props 都能拿到。子组件可以通过 父子传递参数，或者单独引用来解决。

若查看：redux + react-redux 组合查看文章尾部，react-redux博客介绍入口

// App.js 
import { store, dispatch } from '../store'

// react-router-dom 中 Route组件
<Route
  // ...
  element={<item.component store={store} dispatch={dispatch}/>} // v6版本
  // render={<item.component store={store} dispatch={dispatch} />} // v5版本在 render或 component都可以
/>

落地页调用：

import React from "react";

export default function (props) {
    const {store, dispatch} = props;
    console.log(store, dispatch);
    
    return <></>
};

.

【2】传统文档介绍：

src / store / index.js

// 1.导入redux方法
const redux = require("redux");
// 或：
// import { createStore } from "redux"

// 2.定义初始化state变量
const initialData = {
  demo: 0,
};

// 3.定义reducer - 几十个action 需要定义几十个判断
function reducer(state = initialData, action) {
  switch (action.type) {
    case 'ADD_DEMO':
      return {
        ...state,
        demo: action.data
      }

    case 'DEL_DEMO':
      return {
        ...state,
        demo: action.data
      }
    
    default:
      return {...state}
  }
}

// 4.创建store
const store = redux.createStore(reducer);
// 或：
// const store = createStore(reducer);

// 5.暴露抛出
export default store;

定义actions 派发封装

import store from './index';

// 增加
export function ADD_DEMO (data) {
  store.dispatch({
    type: "ADD_DEMO",
    data
  });
}

// 减少
export function DEL_DEMO (data) {
  store.dispatch({
    type: "DEL_DEMO",
    data
  });
}

页面调用：

调用方式一：单个组件引用redux

import React from "react";
import { ADD_DEMO, DEL_DEMO } from '../../store/actions'; // actions 定义派发封装
import store from '../../store'; // 获取底层 store 实例

export default function () {
    function handleAction() {
        ADD_DEMO(123); // 派发更新
        
        let demo = store.getState()?.demo;
        console.log(demo) // 123
    }

    return (
        <div onClick={handleAction}>点击更改redux</div>
    );
};

调用方式二：App.js 中 定义 Route属性

// App.js 
import store from '../store'
// react-router-dom 中 Route组件
<Route
  // ...
  element={<item.component store={store} />} // v6版本
  // render={<item.component store={store} dispatch={dispatch} />} // v5版本 render或 component
/>

落地页：

import React from "react";
import { ADD_DEMO, DEL_DEMO } from '../../store/actions'; // actions 定义派发封装

export default function (props) {
    let { store } = props;
    function handleAction() {
        ADD_DEMO(123); // 派发更新
        
        let demo = store.getState()?.demo; // 调用
        console.log(demo) // 123
    }

    return (
        <div onClick={handleAction}>点击更改redux</div>
    );
};

评论：

• 1.传统定义比较正式，也比较繁琐。每次新增变量，需要配置对应的：(1) initialState变量、(2) reducer对应方法、(3) actions对应新增的处理方法封装。太麻烦
• 2.简化版更纯粹，只负责存储更新。新增redux变量只需新增初始initialState变量，不需要动reducer、actions。但是 我只看到我自己这样玩，尬~~
• 3.状态管理器通病：刷新就没了。核心数据持久化，需要结合缓存做

.

辅助函数combineReducers

接收拆分后 reducer 函数组成的对象，返回一个新的 Reducer 函数。

说白点就是：上文案例的 reducer方法，多写几个去专门负责不同的事。然后使用combineReducers 组合起来成一个大的 Reducer 函数。

// reducers.js
export default reducer_0 = (state = 0, action) => state;
export const reducer_1 = (state = 1, action) => state;
export const reducer_2 = (state = 2, action) => state;

// rootReducer.js
import {combineReducers, createStore} from "redux";

// 导入不同的小 reducer
import reducer_0, {reducer_1, reducer_2} from "./reducers";

// 拼接组合新的大 reducer
const rootReducer = combineReducers({
    reducer_0,
    reducer_1,
    reducer_2
});

const store = createStore(rootReducer);
console.log(store.getState());
// {reducer_0: 0, reducer_1: 1, reducer_2: 2}

.

声明：

本文只介绍的是 redux。没有 react-dedux ！！
使用方式有点区别，没法集成到 react顶层props里，传递在 route父组件不影响，子组件需要单独引用或者父子传递。

react-dedux：Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。不是 Redux 内置组件，需要单独安装。因为一般会和 Redux 一起使用，但是非必须！！！

react-dedux就是 redux专门匹配react应用的组件库。二次封装处理的产物，非必须。

.

拓展：

react-dedux： 还没写，待补充
dva： 还没写，待补充
mobx： 还没写，待补充
recoil： 还没写，待补充

其他的 ~~ 我没用过就不整理了，只整理这几个用过的

---

到此结束，有问题留言。相关博客，等我更新后补充进来