Redux：在传递给createStore的preloadedState参数中找到意外的键 [英] Redux: Unexpected key found in preloadedState argument passed to createStore

问题描述

你能帮助我解决异常在传递给createStore的preloadedState参数中找到的意外键userName。预计会找到一个已知的reducer密钥：default。意外的密钥将被忽略。

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

I discovered this Link but it doesn't help me. I don't undestand something, maybe this part from documentation: plain object with the same shape as the keys passed to it

你能不知道我的错误就是我的例子？

Can you exlain me my mistake on my example?

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

执行后导致控制台结果：

result in console after execution:

< img src =https://i.stack.imgur.com/IuyHO.pngalt =在此处输入图像说明>

推荐答案

TLDR：停止使用 combineReducers 并直接将您的reducer传递给 createStore 。使用从'./foo'导入reducer而不是 import * from'./foo'。

TLDR: stop using combineReducers and pass your reducer to createStore directly. Use import reducer from './foo' instead of import * from './foo'.

默认导入/导出示例，无 combineReducers ：

Example with default import/export, no 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} 。您的预加载状态没有默认属性因此redux抱怨。如果你从'./blabla'使用 import reducer，你得到 module.exports.default 相反，它等于你的减速器。

The second argument of createStore (preloaded state) must have the same object structure as your combined reducers. combineReducers takes an object, and applies each reducer that is provided in the object to the corresponding state property. Now you are exporting your reducer using export default, which is transpiled to something like module.exports.default = yourReducer. When you import the reducer, you get module.exports, which is equal to {default: yourReducer}. Your preloaded state doesn't have a default property thus redux complains. If you use import reducer from './blabla' you get module.exports.default instead which is equal to your reducer.

以下是关于ES6模块系统如何工作的更多信息 MDN 。

Here's more info on how ES6 module system works from MDN.

阅读来自redux的 combineReducers 文档也可以提供帮助。

Reading combineReducers docs from redux may also help.

这篇关于Redux：在传递给createStore的preloadedState参数中找到意外的键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！