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

问题描述

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

我发现了这个

解决方案

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

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

//foo.js功能减速器(状态，动作){返回状态；}导出默认减速器；----//index.js从 './foo' 导入 myReducer；

使用 combineReducers

的示例

//foo.js导出默认值(状态，动作)=>{ ... }----//bar.js导出默认值(状态，动作)=>{ ... }----//index.js从 './foo' 导入 foo;从 './bar' 导入栏；const store = createStore(combineReducers({富，酒吧，});

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

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

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

Can you help me with exception 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.

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

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

result in console after execution:

解决方案

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

Example with default import/export, no combineReducers:

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

----

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

Example with 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,
});

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.

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

Reading combineReducers docs from redux may also help.

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