更新Redux中的api调用

Question

当使用React和Redux时，我遇到了一些简单的问题。考虑这个例子。比方说：

1）我有一个应用程序呈现文章文本和文章标签列表。
2）应用程序获取的文章对象从API，其保存到Redux的储存和通过道具它传递到阵营部件：

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

3）用户可以添加新的标签列表的标签（让我们通过表单）。
4）要更新数据库，我需要调度updateArticle（newArticle）。此操作可以调用服务器并返回更新的文章。

我的问题是在调度动作updateArticle之前将新标签添加到标签数组？内部组件状态或内部的REDX存储？

答案显然是为了节省标签阵列组件的状态，添加新标签那里派遣

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

但在这种情况下，我终极版店外管理数据，据我所知，这不符合Redux的意识形态。

另一个答案是通过减速增加终极版店内新的标签，部分道具将被更新，然后派遣

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

但是，这感觉不自然的改变客户端，然后才数据使可能失败的API调用。

那么，你会怎么做更新呼叫到API？ TNX。

Answer 1

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

动作（形实转换）

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; 
    } 
}