UseSelector State is Undefined

Question

The page does not render, citing TypeError: state is undefined , tracing back to this line in SelectForm.js : const filter = useSelector(state => state.filter); .

I've spent hours trying to figure out what I'm doing wrong. I've tried createSelector but that didn't work. I've tried dispatching a "Fetch Initial State" action, and that didn't work. The component is wrapped in provider tags. I'm not sure why I don't have access to the state. At this point I'm unable to see any flaws I've been looking at it for so long.

Code Snippets

reducer.js

let initialState = {
    filter: {
        country: null,
        state: null,
        level: null,
        team: null
    },

    isDBConnecting: false, 
    isDBConnected: false, 
    isDBError: false 
}

const SelectorReducer = (state=initialState, action) => {
    switch (action.type) {        
        case 'DB_CONNECT_INIT':
            return {
                ...state,
                isDBConnecting: true,
                isDBConnected: false,
                isDBError: false,
            };
...
...
}

export default SelectorReducer;

actions.js

export const initializeDBConnection = () => {
    return {
        type: 'DB_CONNECT_INIT'
    }
};

ParentComponent.js

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux'; //import provider to provide component access to the state

//Component imports
import SelectForm from './components/SelectForm'
import SelectorReducer from '.../reducer.js'

const SelectorStore = createStore(SelectorReducer);

const ParentComponent = () => {

    return (
        <div className="page-container">
            <div id="carousel">
                <div id="wrapper">
                    <Provider store={SelectorStore}>
                        <SelectForm />
                    </Provider>
                </div>
            </div>
    </div>
    )
}

SelectForm.js (Child Component, wrapped in Provider tags above)

//IMPORTS
import React from 'react'; //import react
import { useSelector, useDispatch } from 'react-redux';

//COMPONENT IMPORTS
import FormGroup from '../FormGroup';
import { * as actions } from '.../actions.js';

const SelectForm = (props) => {

    //STATEFUL IMPORTS
    //filter
    const filter = useSelector(state => state.filter);

Answer 1

Credit to @NicholasTower for the answer in the comments. My reducer did not have a default case in which

default: return state

Putting that in solved the issue.

Answer 2

  let filter = useSelector(state => {
    console.log('State: ', state);
    return state.pieChart.filter;
  });

Make sure that you are using the correct object for state .

Add a console for debugging and check the state object. Many times we use multiple reducers which makes our component state nested in global object.

Answer 3

Inside ParentComponent.js you are saying <Provider store={TeamSelectorStore}> . I think you meant to say <Provider store={SelectorStore}>

Answer 4

Sometimes having a break in the switch block of the reducer can cause the prop not defined in the state.

Answer 5

This error can also happen because of an uppercase / lowercase mistake.

let horns = useSelector(state => state.largeRhinohorns);
let horns = useSelector(state => state.largeRhinoHorns);

Answer 6

We should import useSelector form react-redux and then select user details form store in the following way

import { useSelector } from 'react-redux'

const User = () => {

const userInfo= useSelector(state => state.user)

return <div>userInfo.name</div>

}

Answer 7

In my case I was storing the data coming from Redux state at didMount stage whereas the Redux states weren't fully uploaded yet.

  const currentUser = useAuth();
  useEffect(() => {
    form.setFieldValue('email', currentUser.email);
  }, []);

Adding currentUser to useEffect dependency array, get it resolved for me:

  useEffect(() => {
    form.setFieldValue('email', currentUser.email);
  }, [currentUser]);