Redux: Неожиданный ключ, найденный в аргументе preloadedState, переданному в createStore

Вы можете помочь мне с исключением 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 «реагировать» ; импортировать ReactDOM из «реагирования» ; import { Provider } из 'react-redux' ; import { createStore , combReducers , applyMiddleware } из 'redux' ; импортировать приложение из ./containers/App.jsx ' ; импорт * в качестве восстановителей из «./reducers' импорта типов из » ./constants/actions' ;   
   
     
   
    
   
 

константный редуктор = combineReducers ( редукторы );

const destination = document . querySelector ( "#container" );

var store = createStore ( редуктор , { 
    имя_пользователя : '' });  



ReactDOM . render ( < Магазин поставщика = { store }> < Приложение /> </ Провайдер >,
    
        
    
    место назначения
);

консоль . log ( 1 )

магазин . subscribe ( () => { 
console . log ( "-------------------------" ) let s = сохранить . getState () 
console . log ( "STATE =" + s ) для ( var k in s ) { if ( s . HasOwnProperty ( k )) { 
        console . Log ( "k =" + k + "; value =" + s [ k ]); } } })  
 
  
         
    



магазин . отправка ({ 
        тип : типы . LOAD_USER_NAME , 
        имя_пользователя : "Oppps1" }) prettyprint prettyprinted "> 
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
}
}

мой редуктор:

combineReducers

привести к консоли после выполнения:

введите описание изображения здесь

javascript,reactjs,redux,

10

Ответов: 2

21 принят

TLDR: прекратите использовать createStoreи передайте редуктор 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принимает объект и применяет каждый редуктор, который предоставляется в объекте, к соответствующему свойству состояния. Теперь вы экспортируете свой редуктор module.exports.default = yourReducer, который переводится на что-то вроде module.exports. Когда вы импортируете редуктор, вы получаете {default: yourReducer}, что равно default. Ваше предварительно загруженное состояние не обладает defaultсвойством, поэтому редукция жалуется. Если вы используете, import reducer from './blabla'вы получаете module.exports.defaultвместо этого, который равен вашему редуктору.

Вот дополнительная информация о том, как работает модуль модуля ES6 из MDN .

Чтение combReducers docs от redux также может помочь.

1

Или просто:

import yesReducer from './yesReducer';

const store = createStore(combineReducers({
    yesReducer,
    noReducer: (state = {}) => state,
});
JavaScript, reactjs, перевождь,
Похожие вопросы
Яндекс.Метрика