javascript - 将配置传递给 Redux 操作创建者的正确方法

Question

将配置注入动作创建者的“Redux”方式被认为是什么？

考虑一个异步动作创建者：

export function login(username, password) {
    return (dispatch, getState) => {
        const service = Auth.createService(config); // <- that's the one

        service.login(username, password).then((data) => {
            const {token} = data;
            dispatch(success(token));
        }).catch((err) => {
            Logger.log(err);
        });
    };
}

正如您所看到的 - AuthService（和所有其他服务）需要一些配置，通常定义诸如:baseUrl等headers内容。

通过以下方式将它们required 放在AuthService自身中：

import configfrom '../config/globalConfig`;

由于多种原因是次优的，并且不允许您为特定的服务实例覆盖它们。

使用中间件（一些扩展redux-thunk）将提供注入配置的能力，但是：

1. 它很可能已经通过 注入getState，因为对我来说，配置是应用程序状态的一部分，特别是如果它是可编辑的

2. 它仍然不允许基于每个创建者的覆盖

将配置从容器组件直接传递给动作创建者this.props.dispatch(login(username, password, config));对我来说非常冗长。

Answer 1

我认为injectMiddlewareEste 的这个相当简洁：

// Like redux-thunk with dependency injection.
const injectMiddleware = deps => ({ dispatch, getState }) => next => action =>
  next(typeof action === 'function'
    ? action({ ...deps, dispatch, getState })
    : action
  );

这使您可以编写动作创建者，例如

export function login(username, password) {
   return ({ dispatch, getState, authService }) => {

authService并在初始化中间件时注入。