使用redux-offline时，如何在effect中分发Action而非URL并传递结果到Commit

我明白你想在redux-offline的effect阶段触发CHECK_NUMBER操作，把后端返回的结果带到commit阶段的DISPLAY_NUMBER action里。咱们直接看怎么修改你的代码来实现这个需求：

首先，redux-offline的effect支持异步函数形式，你可以在这个函数里执行实际的异步逻辑（比如调用后端接口，或者dispatch你的CHECK_NUMBER action），然后把结果返回给commit函数。

修改后的代码示例 #

meta: {
  offline: {
    // 用异步函数作为effect，执行操作并返回结果
    effect: async (dispatch, getState) => {
      // 这里执行你的CHECK_NUMBER逻辑：可以是直接调用API，或者dispatch对应的action
      // 示例1：直接调用后端接口
      const response = await fetch('/your-api-endpoint/check-number');
      const backendResult = await response.json();

      // 示例2：如果CHECK_NUMBER是thunk action，dispatch它并等待返回结果
      // const backendResult = await dispatch({ type: "CHECK_NUMBER" });

      return backendResult; // 这个结果会被传递到commit函数
    },
    // commit接收effect返回的结果，构造DISPLAY_NUMBER action
    commit: (backendResult) => ({
      type: "DISPLAY_NUMBER",
      payload: backendResult // 把后端返回的结果作为payload传递
    }),
    rollback: { 
      type: TYPES.CHECK_NUMBER, 
      meta: { data } 
    }
  }
}

关键部分解释 #

• Effect函数：这个函数接收dispatch和getState作为参数，你可以在这里完成所有需要的异步操作。不管是直接调用API，还是dispatch其他异步action（比如thunk），只要最后返回后端的结果就行。redux-offline会自动处理离线队列，在线时自动执行这个逻辑。
• Commit函数：它会拿到effect返回的结果，你可以把这个结果包装成DISPLAY_NUMBER action的payload，这样在commit阶段，你的reducer就能接收到后端返回的数据了。
• 注意事项：如果你的CHECK_NUMBER是一个redux-thunk action，要确保它内部能正确返回后端的响应数据（比如在thunk里调用API后return结果），这样effect才能拿到它并传递给commit。

这样修改后，就能实现你要的效果：先执行CHECK_NUMBER相关的异步操作，把后端结果带到commit阶段的DISPLAY_NUMBER action里。

内容的提问来源于stack exchange，提问作者Dilrukshi Silva