Redux: klucz Nieoczekiwane znaleźć w preloadedState argumentu przekazanego do createstore

Question

Czy możesz mi pomóc z wyjątkiem 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.

odkryłem ten Link ale to mi nie pomaga. Nie rozwodzę się, może ta część z dokumentacji: zwykły obiekt o tym samym kształcie, co klucze do niego przekazywane

Czy możesz mi wyjawić mój błąd na moim przykładzie?

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

mój reduktor:

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

wynik w konsoli po wykonaniu:

Answer 1

TLDR: zaprzestać używania combineReducers i zdać reduktor do createStore bezpośrednio. Użyj import reducer from './blabla' zamiast import * from './blabla'.

Drugi argument createStore (stan wstępnie załadowany) musi mieć taką samą strukturę obiektu jak połączone reduktory. combineReducers pobiera obiekt i stosuje każdy reduktor dostarczony w obiekcie do odpowiedniej właściwości stanu. Teraz eksportujesz swój reduktor za pomocą export default, który jest transponowany do czegoś takiego jak module.exports.default = yourReducer. Po zaimportowaniu reduktora otrzymasz module.exports, który jest równy {default: yourReducer}. Twój wstępnie załadowany stan nie ma właściwości default, a zatem redux narzeka. Jeśli użyjesz import reducer from './blabla', otrzymasz module.exports.default zamiast tego, który jest równy twojemu reduktorowi.

Oto więcej informacji o tym, jak działa system modułowy ES6 od MDN.

Czytanie combineReducers docs z redux może również pomóc.