javascript - 减少 redux-thunk 样板文件

Question

在编写 redux-thunk 函数时，称为 thunks 时，有很多样板文件可以很容易地抽象掉。例如，在我们的大多数异步 API 调用中，我们都在执行以下操作，没有任何副作用:

export const LOGIN_REQUEST = 'my-app/auth/LOGIN_REQUEST';
export const LOGIN_RECIEVE = 'my-app/auth/LOGIN_RECIEVE';
export const LOGIN_FAILURE = 'my-app/auth/LOGIN_FAILURE';

// ... reducer code here

export function login(loginHandle, password) {
  return (dispatch, getState, api) => {
    dispatch({ type: LOGIN_REQUEST });

    api.post('/auth/login', { loginHandle, password }).then(
      response => dispatch({ type: LOGIN_RECIEVE, response }),
      error => dispatch({ type: LOGIN_FAILURE, error })
    );
  };
}

简单!虽然这至少涵盖了我们 70% 的请求，但我确信有一种优雅的方法可以将上述代码的分配抽象为类似这样的代码(伪代码):

export function login(loginHandle, password) {
  return (dispatch, getState, api) => api('POST', LOGIN_REQUEST, '/auth/login', { loginHandle, password });
}

当我们需要检查状态和其他副作用时，我们可以返回到适当的 thunk。虽然对于大多数情况...我们可以减少它？

有什么优雅的想法吗？

Answer 1

自 2.1.0 起，Redux Thunk 允许您注入(inject)自定义参数。

const api = createApi() // you would write this function
const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)

// your action creator:
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // you can use api here
  }
}

将来，如果你的 thunk 变得太复杂，你可能需要考虑 redux-saga或 redux-observable .