你能理解的 Redux 简介

祝你有美好的一天😃！

很棒的家伙

👏🏻

嗨，大家好！

在撰写本文时，Redux
是最流行的状态管理库。 部分原因是它主要与最流行的框架React一起使用。

那么Redux是什么？它是一个用于 JavaScript 应用程序的可预测状态管理库。它在我们的应用程序中实现了单向流。它基于Facebook 的 Flux（一种用于构建客户端应用程序的应用程序架构），但有一些不同。它可以用于客户端（前端）、服务器端（后端）或移动原生应用程序。

那么什么是状态管理？显然，它指的是我们如何管理应用中的状态或数据。由于我们的 UI 或视图依赖于状态或数据，因此我们的状态管理必须易于实现且易于理解。

那么什么是单向流？这意味着我们的应用程序数据将遵循单向绑定数据流。请看下面这张图。 我们不能直接从UI进入Reducer ，我们必须先触发一个Action ，或者将Action发送到Store ，然后才能到达Reducer，这就是单向流，意味着整个过程是单向的。

Redux 主要概念

Store -人们有时会混淆Store和State这两个词，以为它们是同一个东西，但事实并非如此。State是我们的应用数据，而Store是保存State 的容器，它有一些与 State 交互的必要方法。

Action - 我们更新或更改状态的唯一方法是通过action。基本上，它是一个对象，它告诉Reducer函数我们想要在State中进行哪些更改。Action 中唯一必需的属性是type属性。

    // Sample Action without data
    const toggleAction = {
       type : 'TOGGLE_MODAL'
    };

    //Sample Action with data
    const updateAction = {
       type :'UPDATE_DATA',
       payload : {
          datas: []
       }
    }

如果你在不同的组件中使用它，并且意识到你到处都在重复这段代码，那么我们最好创建返回这些对象的函数，并创建常量动作类型，这样就可以避免动作类型的拼写错误。
这些函数称为动作创建器 (Action Creator)，类型称为常量动作类型 (Constact Action Types)。

   const types = {
       TOGGLE_MODAL : 'TOGGLE_MODAL',
       UPDATE_DATA : 'UPDATE_DATA'
   };

   const toggle = () => ( {type:types.TOGGLE_MODAL} );

   const updateData = (data) => ( {type:types.UPDATE_DATA, payload:data} );

Reducer - 这是一个根据给定动作更新状态并返回新状态的函数。它是一个纯函数，这意味着该函数的返回值完全取决于传入的参数，它没有副作用，不会改变传入的参数，也不会访问其外部作用域中的任何变量。

    const types = {
       TOGGLE_MODAL: 'TOGGLE_MODAL',
       UPDATE_DATA: 'UPDATE_DATA'
    };

    const initState = { datas: [], isModalOpen: false };

    function reducer(state = initState, action) {
       switch (action.type) {
          case types.TOGGLE_MODAL:
            return { ...state, isModalOpen: !state.isModalOpen };
          case types.UPDATE_DATA:
            return { ...state, datas: action.payload };
          default:
            return state;
       }
     }

这是一个减速器的示例模板，如果您的状态具有许多属性，那么
您可能有许多动作类型，那么也许是时候将它们分离到另一个文件中了。

我对这些概念有个类比。简单来说，旧状态就是你现在的车。商店就像洗车场。减速器就像传送带，是一个供你穿梭的隧道。动作指的是传送带内部的任何装置，例如旋转刷、干燥鼓风机、向车辆喷洒高压水的高压拱门，或者传送带上发生的任何清洁过程。在传送带上完成所有过程后，你就得到了汽车的新状态。

在某些情况下使用 Redux 可能有些过度，例如，如果您正在创建一个包含少量数据的应用程序，那么就不要使用 Redux，但如果您有一个包含大量数据的大型应用程序，那么 Redux可能是一个适合您的解决方案。

感谢大家阅读这篇文章。

祝你有美好的一天😃！