So I am trying to initialize the store of ExtReact before launching the app so I could load data, using the Redux store for updating the state of the application. Don't be confused by a call of an action, it is just used to notify the reducer that he can load the store right now. I was following this tutorial for that (.5.0/guides/extreact_stores_in_flux.html). But I am receiving this error:

Uncaught Error: Reducer "usershortcuts" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 

So these are the most important parts of the code:

1. index.js (the entry point):

   const store = configureStore();
   
   /* Calling of actions. */
   store.dispatch(usershortcutFetchDataThroughStore());
   
     launch(
     <Provider store = {store}>
         <HashRouter>
           <Switch>
   
            {/* <Route path="/" name="Home" ponent={TextEditor}/>*/}
             <Route path="/" name="Home" ponent={Full}/>
           </Switch>
         </HashRouter>
     </Provider>
   );
   

2. My reducer:

export function usershortcuts(state = initialState, action){
        switch(action.type){
            case types.USER_SHORTCUT_FETCH_DATA_SUCCESS:
                return[...state];
        }
}

3. My initial state:

export default {
    /* User shortcuts store. */
    userShortCutStore: new Ext.data.Store({
        model: userShortcutModel,
        autoLoad: true,
        pageSize: 10,
        proxy: {
            type: 'ajax',
            reader: {
                type: 'json'
            },
            url: '/usershortcut/all/'
        }
    })
}

4. Configure store:

export default function configureStore() {
    return createStore(
        rootReducer,
        initialState,

        // Apply thunk middleware and add support for Redux dev tools in Google Chrome
        process.env.NODE_ENV !== "production" && window.devToolsExtension ?
            pose(applyMiddleware(thunk), window.devToolsExtension())
            :
            applyMiddleware(thunk)
    );
}

So I am trying to initialize the store of ExtReact before launching the app so I could load data, using the Redux store for updating the state of the application. Don't be confused by a call of an action, it is just used to notify the reducer that he can load the store right now. I was following this tutorial for that (http://docs.sencha./extreact/6.5.0/guides/extreact_stores_in_flux.html). But I am receiving this error:

Uncaught Error: Reducer "usershortcuts" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 

So these are the most important parts of the code:

1. index.js (the entry point):

   const store = configureStore();
   
   /* Calling of actions. */
   store.dispatch(usershortcutFetchDataThroughStore());
   
     launch(
     <Provider store = {store}>
         <HashRouter>
           <Switch>
   
            {/* <Route path="/" name="Home" ponent={TextEditor}/>*/}
             <Route path="/" name="Home" ponent={Full}/>
           </Switch>
         </HashRouter>
     </Provider>
   );
   

2. My reducer:

export function usershortcuts(state = initialState, action){
        switch(action.type){
            case types.USER_SHORTCUT_FETCH_DATA_SUCCESS:
                return[...state];
        }
}

3. My initial state:

export default {
    /* User shortcuts store. */
    userShortCutStore: new Ext.data.Store({
        model: userShortcutModel,
        autoLoad: true,
        pageSize: 10,
        proxy: {
            type: 'ajax',
            reader: {
                type: 'json'
            },
            url: '/usershortcut/all/'
        }
    })
}

4. Configure store:

export default function configureStore() {
    return createStore(
        rootReducer,
        initialState,

        // Apply thunk middleware and add support for Redux dev tools in Google Chrome
        process.env.NODE_ENV !== "production" && window.devToolsExtension ?
            pose(applyMiddleware(thunk), window.devToolsExtension())
            :
            applyMiddleware(thunk)
    );
}

• javascript
• reactjs
• react-redux
• extreact

1 Answer 1

On your reducer you need to return the default state , and also you cant leave the state as undefined so you need to set an initial state at the least a null value

const initialState = null;
export function usershortcuts(state = initialState, action){
        switch(action.type){
            case types.USER_SHORTCUT_FETCH_DATA_SUCCESS:{
                return[...state];
            }
            default:{
               return state // We return the default state here
            }
        }
}