Question

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

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存储在多个位置：reducer函数的state参数和Note类中的notes。解决此问题的一种方法是从类中删除notes，并将addNew函数修改为addNew(notes, newNote)，但是这种方式我必须将数据传递给每个操作函数。

有没有更好的解决方案？

Answer 1

您在这里很讲究，但是只有一个问题。让我简要介绍一下redux的工作原理。

在redux语言中，您的addNew函数称为Action。您不需要将状态即所有笔记传递给减速器。减速器将自动获取它。下面是您调度操作的方式。

这是redux的工作方式。

您将操作（更新事件）调度到正在使用的组件的状态。

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

errorCode = ErrCustomException;
throw new CustomException;

现在，一旦您已调度动作。您的动作将捕获该特定动作并将其转发给减速器。现在，动作应始终为
形式
{ 类型：“ ADD_NOTE”，有效负载：注意 } 注意类型和有效负载。现在，这是添加注释的操作。现在，此操作将发送到所有减速器。作为参考，请检查here第15行。
最后的reducer会捕获您的动作并自动获取状态。请记住，您只需要传递initialState作为默认值。它总是处于完整状态。

现在，您的减速器将进行如下更改：

window.onerror = function(message, url, line)  {
  if (errorCode == ErrCustomException) {
    return true;
  } else {
    return window_onerror(message, url, line);
  }
};

这将更新形状为的状态：

州 {notes：[]}

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

同时使用redux和class对象时如何修复重复的数据位置

1 个答案: