代码之家  ›  专栏  ›  技术社区  ›  Stav Alfi

为什么redux循环操作会跳过所有中间件?

  •  1
  • Stav Alfi  · 技术社区  · 7 年前

    我跑 redux-loop official example 稍作改动:

    1. 而不是 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());
    

    输出:

    enter image description here


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

    1 回复  |  直到 7 年前
        1
  •  2
  •   Nicholas Tower    7 年前

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

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

    许诺resolve用于创建已处于已解决状态的承诺。它希望您传递承诺应该解析的值,在您的情况下,您已经要求它解析为一个函数。

    你可能想做:

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