redux-thunk有什么用？

Question

我知道是处理异步的，但是他是怎么做到的，看项目代码没看明白

Answer 1

function createThunkMiddleware(extraArgument) {

  return ({ dispatch, getState }) => next => action => {

    if (typeof action === 'function') {

      return action(dispatch, getState, extraArgument);

    }

    return next(action);

  };

}

const thunk = createThunkMiddleware();

thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

这是redux-thunk所有的源代码，默认情况下redux只能dispatch一个plain object，例如：

dispatch({

    type: 'SOME_ACTION_TYPE',

    data: 'xxxx'

});

使用 redux-thunk 之后，可以dispatch一个函数了，这个函数会接收dispatch, getState作为参数，在这个函数里你就可以干你想干的事情，在任何地方随意dispatch了，例如下面这个ajax请求：

dispatch(function (dispatch) {

    $.get('/api/users', function(users) {

        dispatch({

            type: 'FETCH_USERS_SUCCESS',

            users: users,

        });

    });

});