React Redux組件如何訂閱狀態更改

Question

我有一些“ ChangeMainItem”操作（在我的情況下，它是由外部系統或可能的組件之一調度的）。 此操作（例如{type:Change_Main_Item, itemId:5} ）僅更新化mainItemId器中的狀態的一個屬性（例如mainItemId ）。

我的組件A和B需要對此狀態做出反應：顯示加載指示器，獲取其他數據並顯示結果。 可以通過一些異步操作庫來執行順序操作-但是我應該將調度異步操作放在哪里？ 顯然，我無法在組件A和B的化簡器中調度異步操作，也不想將原始Action更改為異步，以便它可以對我的組件提出任何必要的請求。

什么是實現此目標的正確方法？

Answer 1

我建議使用sagas來偵聽您定義的操作並從那里管理異步調用/操作。 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，這樣您可以調度多個操作，並使您的狀態對所有此類調度作出反應。 當您需要執行異步操作時，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.
      })
  }
}

然后，您將需要確定哪些組件需要訂閱/連接到狀態中的某些屬性。

閱讀有關異步操作 ， redux-thunks的信息 ，以及有關如何將組件連接到狀態的本文