Redux常用方法

    结合前面对于React基础知识，虽然已经可以构建一个应用了，但是性能这块还是需要补充一些内容。我们知道在Vue中有状态管理机制替代缓存交互方案，实现更高效率并且具备更好的可扩展性。在React中也有响应的状态管理工具Redux，下面详细介绍Redux的常用方法。

一、Redux简介

    我们知道，传统的全局变量可以在程序的任何地方被随意修改，没有统一的管理机制。不同的函数或模块可能会在不恰当的时候修改全局变量的值，导致难以追踪和调试代码中的问题。比如在 JavaScript 中，直接定义在全局作用域下的变量，任何函数都可以直接对其进行赋值操作。
    但是，在Redux 中，被管理的状态相当于一个大的全局变量，集中在单一的 store 中，通过严格的 action 和 reducer 机制来更新。状态的改变可预测，因为每次更新都需要明确的 action 触发，并且 reducer 是纯函数，给定相同的输入（当前状态和 action），总是返回相同的输出（新状态）。例如，在一个计数器应用中，只有当 dispatch 了特定的 INCREMENT 或 DECREMENT 动作时，计数器的状态才会改变。

    在 Redux 中，整体处理过程为，用户在 UI 交互触发事件处理程序，经 dispatch 发送包含 type 和 payload 的 Action，Store 接收后将其与当前状态传至 Reducer，Reducer 依 type 处理并返回新状态更新 Store 中的 State，UI 再据此重新渲染，实现可预测的单向状态管理。

二、Redux基本使用

    redux的使用方法和前面React hooks详解中useReducer的使用比较类似，只是useReducer关注的是一个或者多个组件的状态，但是redux关注的是全局状态。实际上是 useReducer 借鉴了 Redux 的核心思想，但它是一个更轻量级的实现，专门用于 React 组件内部的状态管理。下面给出一套完整的常用实现方式。
（1）首先需要安装如下依赖，其中：

npm i redux
npm i react-redux

    其中Redux 状态管理库的核心，React-Redux 是 React 官方的状态管理库，用于在应用的多个组件间共享和管理状态。它是 Redux 生态中与 React 集成的标准方案，遵循单向数据流设计模式，帮助构建可预测、易维护的大型应用。
（2）由于前面提到Redux强调状态的改变可预测，因此对于可能的dispatch分发函数，这里使用常量映射，在Redux状态管理中增加一个方法映射文件：

//redux/actionType.js
const INCREAMENT = "INCREAMENT";
const DECREAMENT = "DECREAMENT";
export { INCREAMENT, DECREAMENT };

    接下来，将可能出现的actions做一层抽离，

//redux/actions/actions.js
import { DECREAMENT, INCREAMENT } from "../actionType"
const increment = (val) => {return {type: INCREAMENT,val}
}
const decrement = (val) => {return {type: