javascript - React Redux 组件如何订阅状态变化

Question

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

我的组件 A 和 B 需要对此状态变化使用react:显示加载指示器、获取额外数据并显示结果。顺序操作可以通过一些异步操作库来完成——但是我应该把调度异步操作放在哪里？显然，我无法在组件 A 和 B 的 reducer 中分派(dispatch)异步操作，我也不想将原始操作更改为异步操作，以便它可以对我的组件发出任何必要的请求。

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

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