Redux:在传递给createStore的preloadedState参数中发现意外的键
你能帮我处理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.吗？
我发现了这个Link，但它对我没有帮助。我不理解一些东西，可能是文档中的这一部分:与传递给它的键形状相同的普通对象
你能在我的例子中解释我的错误吗？
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
}
}执行后进入控制台的结果：
回答 3
Stack Overflow用户
发布于 2016-10-15 08:20:20
createStore：停止使用combineReducers，直接将你的reducer传递给TLDR。使用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 (预加载状态)的第二个参数必须具有与组合缩减程序相同的对象结构。combineReducers获取一个对象，并将该对象中提供的每个缩减程序应用于相应的状态属性。现在，您正在使用export default导出您的reducer，它被转换为类似于module.exports.default = yourReducer的代码。导入减速器时，将获得等于{default: yourReducer}的module.exports。你的预加载状态没有default属性，因此redux会报错。如果你使用import reducer from './blabla'，你得到的是module.exports.default，它等于你的reducer。
下面是关于MDN的ES6模块系统如何工作的更多信息。
阅读redux上的combineReducers文档也可能会有所帮助。
Stack Overflow用户
发布于 2018-06-07 06:49:31
或者只是：
import yesReducer from './yesReducer';
const store = createStore(combineReducers({
yesReducer,
noReducer: (state = {}) => state,
});Stack Overflow用户
发布于 2020-07-21 22:49:42
import * as reducers from './reducers'是一个很好的技术，可以避免核心代码依赖于各种功能实现。
为了使其正常工作，您必须指定reducer的名称与您的存储密钥userName相同。这可以通过以下方式实现：
在reducers文件夹中的index.js中，执行以下操作
export { userNameReducer as userName } from "./UserNameReducer"
export { otherReducer as other } from "./OtherReducer"另一种方法是直接将导出的缩减程序重命名为与存储密钥相同的名称。
https://stackoverflow.com/questions/40053159
复制相似问题