【问题标题】:Why redux-loop actions skip all middlewares?为什么 redux-loop 操作会跳过所有中间件?
【发布时间】:2018-10-27 21:14:50
【问题描述】:

我运行 redux-loop official example 并稍作改动:

  1. 我使用带超时的 promise 而不是 fetch
  2. 我添加了日志中间件(从 redux.js.org 教程复制粘贴)。

副作用函数:

import {createStore, compose, applyMiddleware} from 'redux';
import {install, loop, Cmd} from 'redux-loop';

function fetchUser(userId) {
    return Promise.resolve((res, rej) => setTimeout(() => res(userId), 1000));
}

动作:

function initAction() {
    return {
        type: 'INIT'
    };
}

function userFetchSuccessfulAction(user) {
    return {
        type: 'USER_FETCH_SUCCESSFUL',
        user
    };
}

function userFetchFailedAction(err) {
    return {
        type: 'USER_FETCH_ERROR',
        err
    };
}

初始状态:

const initialState = {
        initStarted: false,
        user: null,
        error: null
    };

减速机:

function reducer(state = initialState, action) {
        console.log(action);  // I added this line
        switch (action.type) {
            case 'INIT':
                return loop(
                    {...state, initStarted: true},
                    Cmd.run(fetchUser, {
                        successActionCreator: userFetchSuccessfulAction,
                        failActionCreator: userFetchFailedAction,
                        args: ['1234']
                    })
                );

            case 'USER_FETCH_SUCCESSFUL':
                return {...state, user: action.user};

            case 'USER_FETCH_FAILED':
                return {...state, error: action.error};

            default:
                return state;
        }
    }

我的自定义日志中间件:

    const logger = store => next => action => {
        console.group(action.type);
        console.info('dispatching', action);
        let result = next(action);
        console.log('next state', store.getState());
        console.groupEnd();
        return result
    };

配置存储:

const enhancer = compose(
        applyMiddleware(logger),
        install()
    );

    const store = createStore(reducer, initialState, enhancer);

调度第一个动作以启动它:(我的代码)

store.dispatch(initAction());

输出:


如您所见,第二个操作跳过了我的日志中间件,而且日志的最后一行我也不清楚。为什么 reducer 接收的是函数而不是实际的用户对象?

【问题讨论】:

    标签: javascript redux redux-middleware redux-loop


    【解决方案1】:

    为什么 reducer 接收的是函数而不是实际的用户对象?

    return Promise.resolve((res, rej) => setTimeout(() => res(userId), 1000));
    

    Promise.resolve 用于创建已经处于已解决状态的 Promise。它希望您传递 promise 应该解析的值,并且在您的情况下,您已要求它解析为函数。

    你可能打算这样做:

    return new Promise((res, rej) => setTimeout(() => res(userId), 1000))
    

    【讨论】:

    • 是的,这就是我的意思,但我仍然看到第二个操作编写了我的日志中间件。为什么?
    • 由于我不熟悉 redux-loop,所以我无法帮助您解决这部分问题。
    • 好的,谢谢你的帮助:)
    • 是的,切换到新的 Promise 应该可以解决第二个问题。首先,尝试切换参数的顺序来组合。常量增强器 = compose( install(), applyMiddleware(logger) );订购中间件可能会令人困惑。最简单的事情通常是反复试验。 redux-loop.js.org/docs/api-docs/install.html
    猜你喜欢
    • 2015-10-31
    • 1970-01-01
    • 1970-01-01
    • 2019-01-13
    • 2021-05-21
    • 2013-02-08
    • 2016-12-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多