减少redux-thunk样板

Question

当编写< code>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

不幸的是，在redux社区中没有通用的方法来解决这个确切的问题。我个人认为，人们不应该害怕围绕redux编写自己的自定义包装器来处理这种情况。

我创建了一个名为redux-tiles的库，它实际上具有几乎完全符合您需要的API：）例如，您的代码将如下所示：

import { createTile } from 'redux-tiles';
const login = createTile({
  type: ['user', 'login'],
  // params is an argument with which you call an action
  fn: ({ api, params }) => api('POST', '/auth/login', params),
});

如你所见，这里没有常数，还有一个缩减量。这些东西都是自动创建的，所以你不用做，也不用测试。还有其他特性，比如嵌套(例如，相同的函数将应用于通过id获取项目，但是它们将在reducer中正确更新)和缓存。你可以在这里查看例子。

重做传奇也是一件好事，但如果你需要某种反应性，如果你需要更传统的方法，只需要一种更方便的方式来描述你的行为并将它们组合起来，而不重复自己，那么我发现我的库是一个完美的匹配。

Answer 2

Redux Thunk允许您从2.1.0开始注入自定义参数。

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
  }
}

将来，如果你的砰砰声变得太复杂，你可能需要考虑重制传奇或可重做可观察。