Redux:在传递给createStore的preloadedState参数中找到意外的键

Question

你可以帮助我例外吗？ Unexpected key "userName" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "default". Unexpected keys will be ignored.

我发现了这个链接,但它对我没有帮助.我没有看到一些东西,也许这部分来自文档:普通对象与传递给它的键具有相同的形状

你可以把我的错误放在我的榜样上吗？

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"
})

我的减速机:

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并createStore直接传递您的reducer .用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应用于相应的state属性.现在您正在使用导出您的减速机export default,这被转换为类似的东西module.exports.default = yourReducer.导入reducer时,得到的module.exports等于{default: yourReducer}.您的预加载状态没有default属性,因此redux抱怨.如果你使用的import reducer from './blabla'话,那就module.exports.default等于你的减速器.

以下是有关ES6模块系统如何在MDN中运行的更多信息.

从redux 读取combineReducers文档也可能有所帮助.

Answer 2

要不就：

import yesReducer from './yesReducer';

const store = createStore(combineReducers({
    yesReducer,
    noReducer: (state = {}) => state,
});