1

TLDR：以下 Redux 中间件是否可以，还是一个坏主意/坏做法？如果它不好，你还会如何使用dispatchpipe 或 compose（以声明方式）？对于 ES6 版本，请参见下文。我最初想在 Redux GitHub 上打开问题，但它显然只允许错误报告，并将您推荐给 StackOverflow ‍♂️</p> 

// Purpose: have dispatch return its payload so that it
// can be used in pipes or compositions
export default function createPayloadReturner() {
    return function wrapDispatchToAddPayloadReturn(next) {
        return function dispatchAndReturn(action) {
            function wrappedDispatch() {
                next(action);
                return action.payload;
            }
            if (action.payload) {
                return wrappedDispatch();
            }

            return next(action);
        };
    };
}

动机：我目前正在学习函数式编程。我正在用 Redux 为我的状态管理和 Ramda 编写一个 React 应用程序来帮助我进行函数式编程。

我有一个login由asyncPipe. 它获取凭据、登录用户、保存令牌，并使用该令牌向服务器发出经过身份验证的 GET 请求。来宾请求返回一个或多个对象（房屋）的列表。

// Pseudo-code-ish
import { prop } from 'ramda';

const asyncPipe = (...fns) => x => fns.reduce(async (y, f) => f(await y), x);

const login = asyncPipe(
  loginRequest,
  prop('token'),
  setToken,
  getHouses,
)

// later (currently without the middleware)
const houseList = await login(credentials);

现在问题来了。首先，我想要dispatch餐厅列表 ( dispatch(addHouses(houseList)))。接下来，如果有多个房屋，我想将用户导航到列表屏幕，以便他可以选择房屋。如果只有一所房子，我想立即将他导航到那所房子并挑选它。采摘手段dispatch(pickHouse(house))。

我在这个问题中普遍询问了这个问题。一位评论者建议创建一个中间件，以便dispatch返回相应的操作有效负载并可以在管道中使用。

因此，使用Redux 文档，我写了这个：

export default () => next => action => {
    const wrappedDispatch = () => {
        next(action);
        return action.payload;
    };
    if (action.payload) {
        return wrappedDispatch();
    }

    return next(action);
};

现在您可以在asyncPipe,pipe或compose函数中使用它。

这是返回有效负载的正确方法吗？（我已经对其进行了测试，中间件似乎可以工作。）这个中间件可以吗，还是违反了一些最佳实践？

4

0 回答 0