Redux Toolkit历史API推送

提格兰·彼得罗森(Tigran Petrosyan)

在某些React / Redux应用程序中,必须在分派某些操作后发生到路由的过渡。就我而言,我正是这种情况。让我向您展示一个状态切片的简化器。

nextStep: (state, action) => {
  const { steps } = state;

  if (steps[state.currentTopNavStep][state.currentStep + 1]) {
    state.currentStep++;
  } else {
    state.currentTopNavStep++;
    state.currentStep = 0;
  }
  if (action.payload.history) {
    const nextStep = steps[state.currentTopNavStep][state.currentStep];
    const { gendersMatch, valuesExist } = nextStep;
    let realNextStep;

    if (
      (valuesExist && valuesExist(state, fbObject)) ||
      (gendersMatch && gendersMatch(state))
    ) {
      state.currentStep++;
      realNextStep = steps[state.currentTopNavStep][state.currentStep];
    } else {
      realNextStep = nextStep;
    }

    const newRoute = realNextStep.route;
    action.payload.history.push(newRoute.path);
  }
}

在最后一行,我想将一条新路由推入历史记录,在分派此操作时,它将作为有效负载获得。我想将化简器内部的逻辑转移到中间件中。reduxToolkit提供了createAsyncThunk函数。我想得到这样的东西:

const nextStep = createAsyncThunk(
  'state/nextStep',
  async (history, thunkAPI) => {
    const { state } = thunkAPI.getState();
    const { steps } = state;

    if (steps[state.currentTopNavStep][state.currentStep + 1]) {
      state.currentStep++;
    } else {
      state.currentTopNavStep++;
      state.currentStep = 0;
    }
    if (history) {
      const nextStep = steps[state.currentTopNavStep][state.currentStep];
      const { gendersMatch, valuesExist } = nextStep;
      let realNextStep;

      if (
        (valuesExist && valuesExist(state, fbObject)) ||
        (gendersMatch && gendersMatch(state))
      ) {
        state.currentStep++;
        realNextStep = steps[state.currentTopNavStep][state.currentStep];
      } else {
        realNextStep = nextStep;
      }

      const newRoute = realNextStep.route;
      const res = await history.push(newRoute.path);
      return res; //this will be the action payload
    }
  }
);  

然后在extraReducers中使用它:

 extraReducers: {
    [nextStep.fullfilled]: (state, action) => {
       //Here I face the problem, how to handle it in the reducer
      return action.payload;
    },
  },

有人可以帮我解决这个问题吗

y

问题是中间件一定不能改变状态。
您实际上必须彼此分开执行这些操作:

  • 减速器改变状态
  • 中间件会产生副作用

另外,createAsyncThunk这里也不是正确的工具。cAT的目的是让一个笨拙的人发出“待处理”的动作,然后发出“完成的”或“被拒绝的”动作。您似乎在这里根本没有任何用处。
您要么需要手工编写一个普通的thunk,然后首先分发一个动作,然后该分发获得新的状态,然后再产生副作用,或者您必须为此自己编写一个中间件(这很简单,因为好吧,文档上有示例)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

推送不是功能,Redux

来自分类Dev

React-TypeScript-Redux-Toolkit:无法获取嵌套的api

来自分类Dev

Redux Toolkit-重置状态

来自分类Dev

Redux Toolkit中的getState()方法

来自分类Dev

如何在Redux Toolkit的createSlice中使用Redux-Thunk?

来自分类Dev

如何使用Redux-Toolkit重置Redux Store

来自分类Dev

React / Redux + Soundcloud API

来自分类Dev

使用Redux-Toolkit处理错误

来自分类Dev

WebStorm中的Redux-toolkit操作参数

来自分类Dev

测试调用API的Redux操作

来自分类Dev

React-Redux-Hooks API

来自分类Dev

未从商店传递Redux-Toolkit状态。react-redux

来自分类Dev

将索引对象添加到Redux商店(Redux Toolkit)的最佳方法是什么?

来自分类Dev

如何将Redux Toolkit的createSlice创建的Redux动作传递给React Native中的屏幕

来自分类Dev

Redux-saga和redux-toolkit返回空对象并安慰响应,显示了诺言{<pending>}

来自分类Dev

使用redux-toolkit创建简单的选择器功能

来自分类Dev

从@ reduxjs / toolkit使用configureStore时如何重置Redux Store的状态?

来自分类Dev

如何在Redux Toolkit reducer中替换整个状态?

来自分类Dev

如何使用对象传播Redux.js / Toolkit

来自分类Dev

在reduceer中未触发redux-toolkit操作

来自分类Dev

Redux-toolkit类型'AsyncThunkAction'上不存在属性'then'

来自分类Dev

Redux-Toolkit createAsyncThunk Dispatch显示为未定义

来自分类Dev

使用Redux Toolkit和Typescript反应可观察的史诗

来自分类Dev

打字稿中的redux-toolkit createAction()类型定义

来自分类Dev

如何使用 React、Redux 和 Redux-Saga 实现乐观状态更新/推送

来自分类Dev

React Native Redux Reducer 与 Immutability Helper 推送数组的正确方法

来自分类Dev

与 redux 反应 - 改变响应然后推送到商店?

来自分类Dev

使用REST API进行React + Redux?

来自分类Dev

每个API请求中的Redux使用令牌

Related 相关文章

  1. 1

    推送不是功能,Redux

  2. 2

    React-TypeScript-Redux-Toolkit:无法获取嵌套的api

  3. 3

    Redux Toolkit-重置状态

  4. 4

    Redux Toolkit中的getState()方法

  5. 5

    如何在Redux Toolkit的createSlice中使用Redux-Thunk?

  6. 6

    如何使用Redux-Toolkit重置Redux Store

  7. 7

    React / Redux + Soundcloud API

  8. 8

    使用Redux-Toolkit处理错误

  9. 9

    WebStorm中的Redux-toolkit操作参数

  10. 10

    测试调用API的Redux操作

  11. 11

    React-Redux-Hooks API

  12. 12

    未从商店传递Redux-Toolkit状态。react-redux

  13. 13

    将索引对象添加到Redux商店(Redux Toolkit)的最佳方法是什么?

  14. 14

    如何将Redux Toolkit的createSlice创建的Redux动作传递给React Native中的屏幕

  15. 15

    Redux-saga和redux-toolkit返回空对象并安慰响应,显示了诺言{<pending>}

  16. 16

    使用redux-toolkit创建简单的选择器功能

  17. 17

    从@ reduxjs / toolkit使用configureStore时如何重置Redux Store的状态?

  18. 18

    如何在Redux Toolkit reducer中替换整个状态?

  19. 19

    如何使用对象传播Redux.js / Toolkit

  20. 20

    在reduceer中未触发redux-toolkit操作

  21. 21

    Redux-toolkit类型'AsyncThunkAction'上不存在属性'then'

  22. 22

    Redux-Toolkit createAsyncThunk Dispatch显示为未定义

  23. 23

    使用Redux Toolkit和Typescript反应可观察的史诗

  24. 24

    打字稿中的redux-toolkit createAction()类型定义

  25. 25

    如何使用 React、Redux 和 Redux-Saga 实现乐观状态更新/推送

  26. 26

    React Native Redux Reducer 与 Immutability Helper 推送数组的正确方法

  27. 27

    与 redux 反应 - 改变响应然后推送到商店?

  28. 28

    使用REST API进行React + Redux?

  29. 29

    每个API请求中的Redux使用令牌

热门标签

归档