在 store 上应用中间件在 Redux 中未正确调用 reducer

Question

我正在使用 React + Redux 制作网站。在我添加中间件之前，应用程序运行良好，但在添加之后，reducer 无法正确调度。

这是我的代码：

import { createStore, applyMiddleware } from 'redux';

...

let createStoreWithMiddleware = applyMiddleware(logger)(createStore);

let store = createStoreWithMiddleware(appReducer);

store.dispatch(updateText('text changed.'));

这是我刚刚在上面使用的动作创建器：

const UPDATE_TEXT = 'UPDATE_TEXT';

function updateText(text = '') {
    return {
        type: UPDATE_TEXT,
        text
    };
}

这是 appReducer：

const defaultState = { text: 'default' };
function appReducer(state = defaultState, action) {
    switch(action.type) {
        case UPDATE_TEXT:
            return Object.assign({}, state, {
                text: action.text
            });
        default:
            return state;
    }
}

如果我只是删除 applyMiddleware 并像这样使用 createStore 直接创建商店：

let store = createStore(appReducer);

效果很好！但我真的很想使用中间件。我应该怎么办？谁能帮我一把，将不胜感激！

Answer 1

在 redux-logger 的旧版本（您可能正在使用）中，初始导入是一个需要首先像这样调用的函数：

import createLogger from 'redux-logger'
const logger = createLogger()

然后你可以使用logger作为中间件：

...
const createStoreWithMiddleware = applyMiddleware(logger)(createStore)
...

但是，在当前版本中，您可以简单地 import logger from 'redux-logger' 并以这种方式使用它。如果你想创建一个带有自定义选项的记录器，你可以 import { createLogger } from 'redux-logger'.

在 store 上应用中间件在 Redux 中未正确调用 reducer

applying middleware on store is not called reducer correctly in Redux

javascript

reactjs

redux

react-redux