javascript - Redux:在传递给 createStore 的 preloadedState 参数中发现意外键

Question

你能帮我解决异常吗 在传递给 createStore 的 preloadedState 参数中发现意外的键“userName”。期望找到一个已知的缩减器键:“默认”。意外键将被忽略。

我发现了这个 Link但这对我没有帮助。我不理解某些东西，也许这部分来自文档:plain object with the same shape as the keys passed to it

你能解释一下我的例子中的错误吗？

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import  App from './containers/App.jsx';
import * as reducers from './reducers'
import types from './constants/actions';

const reducer = combineReducers(reducers);

const destination = document.querySelector("#container");

var store = createStore(reducer, {
    userName : ''
});


ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    destination
);

console.log(1)

store.subscribe( ()=> {
console.log("-------------------------")
let s = store.getState()
console.log("STATE = " + s)
for (var k in s) {
    if (s.hasOwnProperty(k)) {
        console.log("k = " + k + "; value = " + s[k]);
    }
}
})

store.dispatch({
        type: types.LOAD_USER_NAME,
        userName : "Oppps1"
})

我的 reducer :

import types from './../constants/actions'

export default function userNameReducer (state = {userName : 'N/A'}, action) {
console.log('inside reducer');
switch (action.type) {
    case types.LOAD_USER_NAME:
        console.log("!!!!!!!!!!!!!!!")
        console.log("action.userName = " + action.userName)
        for (var k in state) {
            if (state.hasOwnProperty(k)) {
                console.log("k = " + k + "; value = " + state[k]);
            }
        }
        return action.userName;
    default:
        return state
}
}

执行后控制台结果:

Answer 1

TLDR:停止使用 combineReducers 并将你的 reducer 直接传递给 createStore。使用 import reducer from './foo' 而不是 import * from './foo'。

默认导入/导出的示例，没有combineReducers:

// foo.js
function reducer(state, action) { return state; }
export default reducer;

----

// index.js
import myReducer from './foo';

combineReducers 示例

// foo.js
export default (state, action) => { ... }

----

// bar.js
export default (state, action) => { ... } 

----

// index.js
import foo from './foo';
import bar from './bar';

const store = createStore(combineReducers({
    foo,
    bar,
});

createStore 的第二个参数(预加载状态)必须与组合的 reducer 具有相同的对象结构。 combineReducers 接受一个对象，并将对象中提供的每个 reducer 应用到相应的状态属性。现在您正在使用 export default 导出您的 reducer，它被转换为类似于 module.exports.default = yourReducer 的内容。当你导入 reducer 时，你会得到 module.exports，它等于 {default: yourReducer}。您的预加载状态没有 default 属性，因此 redux 会提示。如果你使用 import reducer from './blabla' 你会得到 module.exports.default 而不是你的 reducer。

这里有更多关于 ES6 模块系统如何工作的信息，来自 MDN .

阅读 combineReducers来自 redux 的文档也可能有帮助。