美文网首页
redux-thunk

redux-thunk

作者: 422ccfa02512 | 来源:发表于2018-10-14 22:09 被阅读51次

    一、redux-thunk介绍
    redux-thunk用于处理异步action,同类型的有redux-saga

    二、学习网址

    https://github.com/reduxjs/redux-thunk github

    三、安装与引入

    npm install --save react-redux 安装
    import thunk from 'redux-thunk'引入

    三、如何使用redux-thunk

    import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import rootReducer from './reducers';
    // 创建store的时候,第二个参数是中间件,redux-thunk提供了一个thunk中间件,用于处理异步的action
    export default createStore(
      rootReducer,
      applyMiddleware(thunk)
    );
    
    //异步的action, 由于使用了redux-thunk的thunk中间件,
    //所以,在这个action里不用像同步action那样,必须返回一个对象,在这里返回一个方法
    //这个方法有一个dispatch的参数,这个dispatch就是store里的dispatch.
    export const addAsync = (num = 1) => {
      return (dispatch) => {
        // 当这个方法刚进来的时候,就马上告诉reducer,我要开始获取数据了,
        // reducer接收到这个动作,就会执行相应的操作(把isLoading改为true,看reducer里的代码)
        dispatch({
          type: START_GET_DATA
        });
        // 用setTimeout来模拟获取数据
        setTimeout(() => {
          // 获取数据完成之后,需要dispatch两个action.
          // 一个是把获取到的数据,传到一个动作里(ADD)
          dispatch({
            type: ADD,
            num
          });
          // 这个是用来告诉reducer,我获取数据成功了。reducer接收到这个动作,
         //  就会执行相应的操作(把isLoading改为false,看reducer里的代码)
          dispatch({
            type: GET_DATA_SUCCESS
          });
        }, 2000)
      }
    }
    

    相关文章

      网友评论

          本文标题:redux-thunk

          本文链接:https://www.haomeiwen.com/subject/lzitzftx.html