Question

我有一些＆＃34; ChangeMainItem＆＃34;动作（在我的例子中，它由外部系统或可能的组件之一调度）。此操作（例如{type:Change_Main_Item, itemId:5}）仅在reducer中更新state的一个属性（例如mainItemId）。

我的组件A和B需要对此状态更改做出反应：显示加载指示符，获取其他数据并显示结果。顺序操作可以通过一些异步操作库完成 - 但是我应该在哪里放置调度异步操作？显然，我不能在组件A和B的reducer中调度异步操作，我也不想将原始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.
      })
  }
}

然后，您需要确定哪些组件需要订阅/连接到您所在州的某些属性。

了解async action，redux-thunks和this article on how to connect your components to your state

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

2 个答案: