Redux Thunk的目的`[[[arg(s)])=> dispatch =>`?

NattyC

下面的代码来自Brad Traversy在MERN堆栈上的Udemy课程。我是Redux和Redux Thunk的新手,并试图了解其目的=> dispatch =>什么我知道它来自Redux Thunk,它是在Redux存储文件中设置的。我认为dispatch在此使用该命令是为了从此函数调度多个动作,并阅读该= ([arg(s)]) => dispatch =>语法是currying的示例(尽管由于curring每个函数都有一个参数,所以这似乎并不正确)。

我非常感谢您的帮助=> dispatch =>

(其他较小的混乱点:在此过程中,该功能setAlert被称为动作,但是我不确定它是否正确,因为它包含多个动作派遣。)

export const setAlert = (msg, alertType, timeout = 5000) => dispatch => {
  const id = uuidv4();
  dispatch({
    type: SET_ALERT,
    payload: { msg, alertType, id }
  });

  setTimeout(() => dispatch({ type: REMOVE_ALERT, payload: id }), timeout);
};
大卫

这里发生了几件事:

1)setAlert通常称为“动作创建者”。这个函数返回一个动作,您以后可以分派它。

2)Redux-Thunk允许您将表单的功能(dispatch) => {}用作操作(代替更普通的对象表单{ type, payload }

如果在查看它们如何组合在一起之前单独查看它们,可能会有所帮助:

// This is an action creator (a function that returns an action)
// This doesn't use redux thunk, the action is just a simple object.
// Because it's an action creator you can pass in arguments
// Because it's not a thunk you can't control when then dispatch happens
const setAlertActionCreator = (msg, alertType) => {
  const id = uuidv4();
  return {
    type: SET_ALERT,
    payload: { msg, alertType, id }
  };
};

// You use this as:
dispatch(setAlertActionCreator("msg", "type"));

// This is not an action creator it's just an action.
// This IS a redux-thunk action (it's a (dispatch) => {} function not a simple object)
// Because it's not an action creator you can't pass in arguments to get a custom action back
// Because it IS a redux-thunk action you can dispatch more actions later
const setAlertThunk = (dispatch) => {
  setTimeout(() => dispatch({
    type: SET_ALERT,
    payload: {
      message: "fixed message",
      alertType: "fixed alertType",
      id: "fixed id",
    }
  }), 5000);
};

// You use this as:
dispatch(setAlertThunk);

// When you combine both patterns you gain the ability
// to both pass in arguments and to create additional dispatches
// as the function runs (in this case dispatching again after a timeout.)
// I won't repeat your code, but will show how you would call it:

dispatch(setAlertActionCreator("msg", "type"));

// ie: you use it the same way as example 1.

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Redux Thunk - 为什么我必须调用 dispatch() 两次?

来自分类Dev

将接口传递给`dispatch<ShowSnackbar>({})` 时,Redux-thunk ThunkDispatch 类型失败

来自分类Dev

store.dispatch不是函数-对本机redux-persist和redux-thunk middlware进行反应

来自分类Dev

React Router Switch Redux Dispatch

来自分类Dev

在 dispatch func react redux 中调用 dispatch func

来自分类Dev

Redux的Store.dispatch的问题未更新

来自分类Dev

在React / Redux中获得Dispatch的价值

来自分类Dev

在 redux 中间件中调用 dispatch

来自分类Dev

redux 单元测试 Store.dispatch()

来自分类Dev

Redux - Ngrx action dispatch 异步处理

来自分类Dev

在redux中没有使用reactjs定义Dispatch

来自分类Dev

Redux-Toolkit createAsyncThunk Dispatch显示为未定义

来自分类Dev

更新状态道具而无需触发dispatch()-React Redux

来自分类Dev

在redux中没有使用reactjs定义Dispatch

来自分类Dev

在 NextJS getInitialProps 中调用 dispatch 时访问 redux 状态

来自分类Dev

React Native Advice - 触发 Redux Action OnPress Dispatch Action

来自分类Dev

Dispatch prop 作为从 React Redux Container 存储的参数

来自分类Dev

派发Redux-Thunk

来自分类Dev

Redux Thunk 如何实现

来自分类Dev

Redux Thunk与Redux定制中间件

来自分类Dev

减少redux-thunk样板

来自分类Dev

Redux Thunk和异步操作

来自分类Dev

Redux Thunk Firebase - 获取数组

来自分类Dev

Redux Thunk 共享异步对象

来自分类Dev

Redux中间件中的dispatch和next之间有什么区别?

来自分类Dev

Dispatch()调用一个函数,但是.then()在React-Redux上不起作用

来自分类Dev

获取props.dispatch()的类型定义,以将TypeScript与React-Redux一起使用

来自分类Dev

Flutter Redux Dispatch Action更新状态,但不更新Stream中的UI

来自分类Dev

React-Redux-Dispatch Action Error,this.props.mostrarProduto不是一个函数

Related 相关文章

  1. 1

    Redux Thunk - 为什么我必须调用 dispatch() 两次?

  2. 2

    将接口传递给`dispatch<ShowSnackbar>({})` 时,Redux-thunk ThunkDispatch 类型失败

  3. 3

    store.dispatch不是函数-对本机redux-persist和redux-thunk middlware进行反应

  4. 4

    React Router Switch Redux Dispatch

  5. 5

    在 dispatch func react redux 中调用 dispatch func

  6. 6

    Redux的Store.dispatch的问题未更新

  7. 7

    在React / Redux中获得Dispatch的价值

  8. 8

    在 redux 中间件中调用 dispatch

  9. 9

    redux 单元测试 Store.dispatch()

  10. 10

    Redux - Ngrx action dispatch 异步处理

  11. 11

    在redux中没有使用reactjs定义Dispatch

  12. 12

    Redux-Toolkit createAsyncThunk Dispatch显示为未定义

  13. 13

    更新状态道具而无需触发dispatch()-React Redux

  14. 14

    在redux中没有使用reactjs定义Dispatch

  15. 15

    在 NextJS getInitialProps 中调用 dispatch 时访问 redux 状态

  16. 16

    React Native Advice - 触发 Redux Action OnPress Dispatch Action

  17. 17

    Dispatch prop 作为从 React Redux Container 存储的参数

  18. 18

    派发Redux-Thunk

  19. 19

    Redux Thunk 如何实现

  20. 20

    Redux Thunk与Redux定制中间件

  21. 21

    减少redux-thunk样板

  22. 22

    Redux Thunk和异步操作

  23. 23

    Redux Thunk Firebase - 获取数组

  24. 24

    Redux Thunk 共享异步对象

  25. 25

    Redux中间件中的dispatch和next之间有什么区别?

  26. 26

    Dispatch()调用一个函数,但是.then()在React-Redux上不起作用

  27. 27

    获取props.dispatch()的类型定义,以将TypeScript与React-Redux一起使用

  28. 28

    Flutter Redux Dispatch Action更新状态,但不更新Stream中的UI

  29. 29

    React-Redux-Dispatch Action Error,this.props.mostrarProduto不是一个函数

热门标签

归档