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