ReduxでのAPI呼び出しの更新

Question

ReactとReduxで遊んでいるときに簡単な問題に直面しました。この例を考えてみましょう。たとえば、次のようにします。

1）記事のテキストと記事タグのリストをレンダリングするアプリがあります。
2）アプリケーションは、APIからの記事のオブジェクトを取得しますReduxの店にそれを保存し、小道具を通じてリアクトコンポーネントに渡し：

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

3）ユーザーは、リストに新しいタグを追加することができますのタグ（フォームを使って）
4）データベースを更新するには、アクションupdateArticle（newArticle）をディスパッチする必要があります。この操作により、サーバにコールを発信し、更新された記事を返します。

私の質問は、updateArticleアクションをディスパッチする前に新しいタグをタグの配列に追加することです。内部の部品状態または内部還元店？

、明白な答えは、コンポーネントの状態でタグの配列を保存そこに新しいタグを追加し、

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

を派遣することである。しかし、この場合には、私はReduxの店の外にデータを管理しています私が理解する限り、Reduxのイデオロギーには対応していません。

別の答え減速を通じてReduxのストア内で新しいタグを追加することで、コンポーネントの小道具を更新し、その後

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

を派遣しかし、これが唯一のクライアント上のデータを変更することが不自然に感じているとされます失敗するapi呼び出しを行います。

これで、あなたはアップデートをapiに呼び出すことができますか？ Tnx。

Answer 1

thunk（非同期アクション作成者）を作成して、apiを呼び出し、サーバーが応答してエラーがないときにアクションをディスパッチする必要があります。このアクションには、追加されたタグに関する情報が含まれている必要があります。また、店舗内のリデューサーは、アクションに付随するタグを追加してタグのリストを更新する必要があります。

アクション（サンク）

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