Question

在玩React和Redux时遇到了一些简单的问题。考虑这个例子。让我们说：

1）我有一个应用程序，用于呈现文章文本和文章标签列表 2）App从api获取文章对象，将其保存到redux商店并通过props将其传递给React组件：

{
  text: "lorem ipsum dolor ...",
  tags: ["lorem", "ipsum"]
}

3）用户可以将新标签添加到标签列表中（让我们通过表格说明） 4）要更新数据库，我需要发送动作updateArticle（newArticle）。此操作会调用服务器并返回更新的文章。

我的问题是在分派动作updateArticle之前，在标签数组中添加新标签的位置是什么？内部组件状态或内部redux存储？

显而易见的答案是在组件状态下保存标签数组，在那里添加新标签并发送

updateArticle({
  text: this.props.text, 
  tags: this.state.tags
});

但在这种情况下，我正在管理Redux商店之外的数据，据我所知，这与Redux意识形态不符。

另一个答案是通过reducer在Redux商店里面添加新标签，组件道具会更新然后发送

updateArticle({
  text: this.props.text,
  tags: this.props.tags
})

但是，在客户端更改数据并且只能进行可能失败的api调用会感觉不自然。

那么，你可以用什么方式对api进行UPDATE调用？ TNX。

Answer 1

您应该创建一个thunk（异步操作创建者），它将调用api并在服务器响应并且没有错误时调度操作。此操作应包含有关已添加的标记的信息，并且商店中的reducer应通过添加操作附带的标记来更新标记列表。

行动（thunk）

addTag = tag => dispatch => fetch(...)
  .then(result => dispatch({ type: 'tag-add', tag }));

<强>减速

reducer = (state = {
  tags: []
}, action) => {
  switch (action.type) {
    case 'tag-add':
      return { ...state, tags: [...state.tags, action.tag] };
    default:
      return state;
  }
}

更新Redux中的api调用

1 个答案: