Redux: अप्रत्याशित preloadedState तर्क CreateStore

Question

के लिए पारित में पाया कुंजी

तुम मुझे अपवाद 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" 
}) 

मेरी कम करने: निष्पादन के बाद कंसोल में

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

परिणाम:

Answer 1

TLDR: combineReducers का उपयोग कर बंद करो और सीधे createStore करने के लिए अपने कम करने गुजरती हैं। import * from './blabla' के बजाय import reducer from './blabla' का उपयोग करें।

createStore (प्रीलोडेड राज्य) का दूसरा तर्क आपके संयुक्त reducers के समान ऑब्जेक्ट संरचना होना चाहिए। combineReducers एक वस्तु लेता है, और प्रत्येक रेड्यूसर को लागू करता है जो ऑब्जेक्ट में संबंधित राज्य संपत्ति में प्रदान किया जाता है। अब आप export default का उपयोग करके अपने रेड्यूसर का निर्यात कर रहे हैं, जो module.exports.default = yourReducer जैसे कुछ के लिए पारदर्शी है। जब आप reducer आयात करते हैं, तो आपको module.exports मिलता है, जो {default: yourReducer} के बराबर है। आपके प्रीलोड किए गए राज्य में default संपत्ति नहीं है, इस प्रकार रेडक्स शिकायत करता है। यदि आप import reducer from './blabla' का उपयोग करते हैं तो आपको module.exports.default मिलता है जो आपके रेड्यूसर के बराबर होता है।

ईएस 6 मॉड्यूल सिस्टम MDN से कैसे काम करता है इस बारे में अधिक जानकारी यहां दी गई है।

पढ़ना combineReducers रेडक्स से दस्तावेज़ भी मदद कर सकते हैं।