将配置传递给 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 的一些扩展）将提供注入配置的能力，但是：

它很可能已经通过 getState 注入，因为对我来说，配置是应用程序状态的一部分，尤其是如果它是可编辑的
它仍然不允许在每个创作者基础上覆盖

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

Answer 1

我认为来自 Este 的 injectMiddleware 相当整洁：

// 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。

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

Proper way to pass configuration into Redux action creators

javascript

configuration

redux

redux-thunk