React Redux组件如何在状态更改时订阅

Question

我有一些“ChangeMainItem”操作（在我的例子中，它是由外部系统或可能的组件之一调度的）。此操作（例如{type:Change\u Main\u Item，itemId:5}）仅更新reducer中状态的一个属性（例如mainItemId）。

我的组件A和B需要对此状态更改做出反应：显示加载指示器、获取其他数据并显示结果。顺序动作可以通过一些异步动作库来完成，但是我应该把调度异步动作放在哪里呢？显然，我不能在组件A和B的reducer中分派异步操作，我也不想将原始操作更改为异步，这样它就可以对我的组件发出任何必要的请求。

实现这一目标的正确方法是什么？

Answer 1

嗯，对于这样一个问题，你有多种方法。

您可以使用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以及如何将组件连接到状态的本文

Answer 2

我建议使用sagas来监听您定义的操作，并从中管理您的异步调用/操作。Redux传奇太棒了。

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