时间戳

首页 > 解决方案 > 使用 redux 和类对象时如何修复重复的数据位置

design-patterns - 使用 redux 和类对象时如何修复重复的数据位置

问题描述

我正在尝试重构我redux的 reducer 函数，我的目的是将数据操作函数移动到一个单独的类中。这应该是这样的：

减速器.js

const initialState = {
  notes: []
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_NOTES':
      let newState = Note.addNew(action.note);
      return newState;
    ...
  }
}

note.js

class Note {
  notes = [];

  function addNew(note) {
    return [...this.notes, note];
  }
}

我的问题notes是存储在多个位置：statereducer 函数的参数和notesNote 类内部。解决此问题的一种方法是notes从类中删除并将 addNew 函数修改为，addNew(notes, newNote)但这样我必须将数据传递给每个操作函数。

有没有更好的解决方案？

标签： design-patternsredux

解决方案

您在这里非常正确，但只有一个问题。让我简要介绍一下 redux 的工作原理。

在 redux 语言中，您的 addNew 函数称为 Action。您不需要将状态（即所有注释）传递给减速器。reducer 会自动获取它。以下是您发送操作的方式。

这就是 redux 的工作原理。

  1. 您将操作（更新事件）从您正在使用的组件中分派到状态。

请参阅此处的第 9 行 您可以将任何您想要的内容传递给该特定操作。假设您将注释传递给操作 addNew。代码将是

    const sendNote = note => {
        store.dispatch(addNew(note);
    };

  1. 现在，一旦您发送了动作。您的操作将捕获该特定操作并将其转发给减速器。现在行动应该总是形式

    { type : 'ADD_NOTE', payload : note } 注意类型和有效负载。现在这是添加注释的操作。现在这个动作将被发送到所有的reducer。作为参考，请在此处查看第 15 行。

  2. 最后，reducer 捕捉到你的动作并自动获取状态。请记住，您只需要传递 initialState 作为默认值。它总是获得完整的状态。

现在你的减速器将改变如下：

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_NOTES':
      return state.notes.push(action.payload);
  }
}

这将更新形状为的状态：

状态 {注释：[]}

我强烈建议您阅读这篇长而深入的文章，其中 Ohans 帮助您使用 Redux 开发真实世界的应用程序。

推荐阅读