ajax - 如何通过 Redux 触发 AJAX 调用以响应状态变化？

Question

我正在将现有的状态模型转换为 Redux，并且在大多数情况下都没有痛苦。但是，我遇到的问题之一是转换“观察到的”状态 ajax 请求。本质上，我有某些 ajax 请求“链接”到其他状态，所以无论谁修改它们，它们总是会正确发出。我可以通过订阅 Redux 存储更新来获得类似的行为，但是在监听器中触发操作感觉像是一种黑客行为。

一个可能的解决方案是通过 thunk 模式将逻辑移动到 Action 创建者。问题是我要么必须在 Action 之间复制获取逻辑(因为多个 Action 可以修改“观察到的”状态)，要么将大多数 reducer 逻辑拉到 Action 创建者级别。 Action 创建者也不应该知道 reducer 将如何响应发出的 Action 。

我可以批处理“子 Action ”，所以我只需要在每个 Action “块”中放置适当的获取逻辑，但这似乎违反了产生有效状态的 Action 的概念。我宁愿在 Action 创建者级别承担此责任。

是否有任何普遍接受的规则？这不是一个简单的应用程序，其中在与组件交互时发出临时 ajax 请求，大多数数据在多个组件之间共享，并且请求被优化和获取以响应状态变化。

TLDR；
我想触发 ajax 请求以响应状态变化，而不是在发生特定操作时。除了在订阅监听器中触发这些操作之外，是否有更好的“Redux 特定”方式来组织 action/actionCreators 来模拟此行为？

Answer 1

使用 store.subscribe()
最简单的方法是简单地使用 store.subscribe()方法:

let prevState
store.subscribe(() => {
  let state = store.getState()

  if (state.something !== prevState.something) {
    store.dispatch(something())
  }

  prevState = state
})

您可以编写自定义抽象，让您注册副作用的条件，以便更明确地表达它们。

使用 Redux 循环

您可能想查看 Redux Loop它让你描述效果(如 AJAX)调用 一起在您的 reducer 中进行状态更新。

通过这种方式，您可以像当前一样“返回”这些效果以响应某些操作 return下一个状态:

export default function reducer(state, action) {
  switch (action.type) {
    case 'LOADING_START':
      return loop(
        { ...state, loading: true },
        Effects.promise(fetchDetails, action.payload.id)
      );

    case 'LOADING_SUCCESS':
      return {
        ...state,
        loading: false,
        details: action.payload
      };

这种方法的灵感来自 Elm Architecture .

使用 Redux Saga

您也可以使用 Redux Saga这使您可以编写可以执行操作、执行一些异步工作并将结果操作放入存储的长时间运行的进程(“sagas”)。 Sagas 观察特定的 Action 而不是状态更新，这不是你所要求的，但我想我还是会提到它们以防万一。它们适用于复杂的异步控制流和并发。

function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED",message: e.message});
   }
}

function* mySaga() {
  yield* takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

无一真道

所有这些选项都有不同的权衡。有时人们会使用一两个，甚至全部三个，这取决于测试和描述必要逻辑最方便的方式。我鼓励您尝试所有三个并选择最适合您的用例的方法。