Reduxコンポーネントが状態変更時にサブスクライブする方法

Question

私はいくつかの "ChangeMainItem"アクションを持っています（私の場合は、外部システムかコンポーネントのいずれかでディスパッチされます）。このアクション（例：{type:Change_Main_Item, itemId:5}）は、減速機の状態の1つのプロパティのみを更新します（例：mainItemId）。

My Component AとBはこの状態の変化に反応する必要があります：ローディングインジケータの表示、追加データの取得、および結果の表示。シーケンシャルアクションは、いくつかの非同期アクションライブラリを介して行うことができますが、ディスパッチ非同期アクションはどこに配置する必要がありますか？明らかに、コンポーネントAとBの減速機で非同期アクションをディスパッチできません。元のアクションを非同期に変更して、コンポーネントに必要なリクエストを行うこともできません。

これを達成する正しい方法は何ですか？

Answer 1

読む

私はあなたの定義されたアクションに耳を傾け、そこからあなたの非同期呼び出し/アクションを管理するためのサガを使用することをお勧め。 Redux-sagaは最高です。

import { put, takeEvery } from 'redux-saga/effects' 
import {Change_Main_Item, ANOTHER_ACTION, THIRD_ACTION} from '../actions' 


function* doSomething() { 
     yield put({type: "ANOTHER_ACTION", payload: data}); 
} 

function* doAnotherThing() { 
     yield put({type: "THIRD_ACTION", payload: data}); 
} 

function* mySaga() { 
    yield takeEvery("Change_Main_Item", [doSomething, doAnotherThing]); 
} 

私はこのことについて考えたが、私はアクションがあまりにも多くを知っているという考えを好きではないhttps://github.com/redux-saga/redux-saga

Answer 2

このような質問には、複数のアプローチがあります。

redux-thunkを使用すると、複数のアクションをディスパッチし、そのようなディスパッチすべてに対してあなたの状態を反応させることができます。サンクミドルウェアは、非同期アクションを実行する必要がある場合に便利です。

例：

function changeMainItem(id) { 
    return (dispatch, getState) { 
    dispatch(requestChangeMainItem); //This tells the state that it's loading some ajax; you presumably want to add some boolean, indicating a loading icon. 
    return makeSomeRequest(id) 
     .then(data => { 
     dispatch(changeMainItem(data.id)) //presumably, this is where you update your item 
     // perhaps dispatch another function to do more stuff. 
     }) 
    } 
} 

次に、あなたの状態で特定のプロパティに接続/サブスクライブする必要のあるコンポーネントを把握する必要があります。およそasync action、redux-thunks、およびthis article on how to connect your components to your state