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的信息 ，以及有关如何将组件连接到状态的本文