简单描述一下redux-thunk的个人理解

简介: 简单描述一下redux-thunk的个人理解

先说说中间件的理解:中间件的作用就是在执行某一任务过程的时间节点中,如执行前,执行中,执行后等等时间节点,插入某一项操作。

redux-thunk就是一款中间件,它能让我们在修改redux的state这一过程中,插入判断,让原本能够自动dispatch改变state的行为------变成需要我们在获取到正确的value值,进行判断之后,再通过手动调用dispatch来改变state

加入redux-thunk和不加入redux-thunk的体验上的区别,可以简单概况为,使用redux-thunk,我们需要手动去调用dispatch,这样我们可以在执行异步修改state的时候能让state的值变得可控。不使用redux-thunk,我们就不需要手动去调用dispatch,而是自动调用dispatch来修改state,这不适合异步修改state

使用redux-thunk的action函数写法

export const asyncChangeLocation = () => {
  return async (dispatch: any) => {
    const data: any = {};
    const params: any = {
      type: 'ASYNC_CHANGE_LOCATION',
      payload: {
        data
      }
    };
    dispatch(params);
  }
}

不使用redux-thunk的action函数写法

export const changeToken = (token: string) => {
  return {
    type: 'CHANGE_TOKEN',
    payload: {
      token
    }
  }
};
目录
相关文章
|
5月前
|
JavaScript 前端开发 中间件
useReducer+createContext真的可以代替Redux吗?
useReducer+createContext真的可以代替Redux吗?
80 0
|
8月前
|
存储 JavaScript 前端开发
什么是Redux?
什么是Redux?
|
6月前
|
JavaScript 中间件
React-Redux-thunk
React-Redux-thunk
28 0
|
6月前
|
JavaScript 中间件
React-Redux-thunk实现原理
React-Redux-thunk实现原理
41 0
|
6月前
|
存储 JavaScript 中间件
React-Redux-Saga
React-Redux-Saga
20 0
|
8月前
|
JavaScript
Redux中 combineReducers的使用
Redux中 combineReducers的使用
|
8月前
|
JavaScript 前端开发 中间件
说说你对Redux的理解?和react-redux有什么区别?
说说你对Redux的理解?和react-redux有什么区别?
|
10月前
|
存储 JavaScript 前端开发
MobX or Redux ? #81
MobX or Redux ? #81
58 0
|
10月前
|
存储 JavaScript 中间件
React-thunk
React-thunk
38 0
|
JavaScript 前端开发 中间件
redux&react-redux(一)
redux&react-redux(一)
redux&react-redux(一)