了解如何在Redux中使用还原器

Redux还原器是管理应用程序状态更改的核心功能。他们以当前状态和行动为投入，并返回一个反映动作效果的新状态。这样可以确保状态不变性，这是可预测和一致行为的Redux的关键原则。

为什么要Redux？ Redux利用还原器将状态管理集中在单个“商店”中，从而提供了一种结构化的方法来进行状态更新。

本指南侧重于理解和使用还原功能。我们将探讨他们如何更新应用程序状态及其在Redux等州管理框架中的关键作用。

了解Redux中的“状态”

状态在任何给定时刻表示应用程序的数据。状态更改是由用户交互（单击，表单提交）或外部事件（网络请求）触发的。在Redux中，所有状态修改仅发生在还原功能中。还原器使用当前状态和action对象来计算下一个状态。

数学上：

Current State Action = New State

简化功能通常看起来像这样：

 const contactreducer =（state = initialstate，action）=> {
  //状态更新逻辑
};

initialState和action由应用程序定义。

state参数

state参数表示应用程序的当前状态。最初，这是initialState 。

 CONTACTREDUCER（初始状态，动作）；

例如，如果我们的应用程序以空的联系列表开头：

 const initialstate = {contacts：[]};

该initialState成为还原器的初始state参数。

action参数

action是至少指示type更改类型的对象。 payload属性（可选）包含更新所需的数据。用于创建新联系人：

 const Action = {
  类型：'new_contact'，
  有效载荷：{
    名称：“约翰·杜”（John Doe），
    地点：“拉各斯，尼日利亚”，
    电子邮件：'john.doe@example.com'
  }
};

action.type是必不可少的； action.payload提供结构化数据。

不变地更新状态

禁止直接修改state 。使用Object.assign()或传播操作员（ ... ）创建一个新的状态对象。

使用Object.assign()

 const contactreducer =（状态，action）=> {
  switch（action.type）{
    案例“ new_contact”：
      返回对象。
        联系人：[... state.contacts，action.payload]
      }）;
    默认：
      返回状态；
  }
};

Object.assign({}, state, ...)创建一个新对象，复制state并添加/修改属性。空对象{}对于避免突变至关重要。

使用传播操作员

另外，传播操作员提供了一种更简洁的方法：

 const contactreducer =（状态，action）=> {
  switch（action.type）{
    案例“ new_contact”：
      返回{...状态，联系人：[... state.contacts，action.payload]};
    默认：
      返回状态；
  }
};

这将新的联系人添加到现有contacts阵列中，而无需更改原始state 。

switch语句

switch语句处理不同的action.type值，相应地指导状态更新。

 const contactreducer =（状态，action）=> {
  switch（action.type）{
    案例“ new_contact”：
      // ...（添加联系人逻辑）
      休息;
    案例“ update_contact”：
      // ...（更新联系人逻辑）
      休息;
    案例“ delete_contact”：
      // ...（删除联系逻辑）
      休息;
    默认：
      返回状态； //返回未知动作的不变状态
  }
};

default情况对于处理未知动作，防止意外状态的变化至关重要。

一个完整的示例（没有redux）

这证明了React（无redux）中的还原功能，展示了核心原理：

 // ...（React组件代码）
const [state，setState] = usestate（initialstate）;

const handlenewcontact =（contact）=> {
  const Action = {type：'new_contact'，有效载荷：联系人};
  setState（contactreducer（状态，行动））;
};

// ...（组件代码的其余代码）

此示例显示了如何独立于REDUX来管理状态更新的如何使用还原功能。将其扩展到处理UPDATE_CONTACT是一个简单的练习。

有关更高级的Redux还原使用情况，请咨询官方的Redux文档。

以上是了解如何在Redux中使用还原器的详细内容。更多信息请关注PHP中文网其他相关文章！