title: Redux createStore() is deprecated - Cannot get state from getState() in Redux action
body: <p>So, the <code>createStore()</code> Redux is now deprecated and <code>configureStore()</code> is recommended from <a href="https://redux-toolkit.js.org/" rel="noreferrer">@reduxjs/toolkit</a>.</p>
  <p>I'm pretty sure it's related to not being able to get <code>userInfo</code> state using <code>getState()</code> in my actions.</p>
  <p><code>getState()</code> of <code>userLogin</code> returns <code>undefined</code>. But when I remove <code>getState()</code>, the action works.</p>
  <p>STORE:</p>
  <pre><code>import { configureStore } from '@reduxjs/toolkit'
  import thunk from 'redux-thunk'
  import {
    productAddReducer,
    productDeleteReducer,
    productDetailsReducer,
    productListReducer,
    productUpdateReducer,
  } from './reducers/productReducers'
  import { composeWithDevTools } from 'redux-devtools-extension'
  import {
    userLoginReducer,
    userRegisterReducer,
    userDetailsReducer,
    userListReducer,
    userDeleteReducer,
    userUpdateReducer,
  } from './reducers/userReducers'
  
  const reducer = {
    // User
    userLogin: userLoginReducer,
    userRegister: userRegisterReducer,
    userDetails: userDetailsReducer,
    userList: userListReducer,
    userDelete: userDeleteReducer,
    userUpdate: userUpdateReducer,
    // Product
    productAdd: productAddReducer,
    productList: productListReducer,
    productDetails: productDetailsReducer,
    productUpdate: productUpdateReducer,
    productDelete: productDeleteReducer,
  }
  
  const userInfoFromStorage = localStorage.getItem('userInfo')
    ? JSON.parse(localStorage.getItem('userInfo'))
    : null
  
  const preLoadedState = {
    userLogin: { userInfo: userInfoFromStorage },
  }
  
  const middleware = [thunk]
  
  const store = configureStore({
    reducer,
    preLoadedState,
    middleware,
  })
  
  export default store
  </code></pre>
  <p>ACTION:</p>
  <pre><code>import axios from 'axios'
  import {
    PRODUCT_ADD_FAIL,
    PRODUCT_ADD_REQUEST,
    PRODUCT_ADD_SUCCESS,
    PRODUCT_DELETE_FAIL,
    PRODUCT_DELETE_REQUEST,
    PRODUCT_DELETE_SUCCESS,
    PRODUCT_DETAILS_FAIL,
    PRODUCT_DETAILS_REQUEST,
    PRODUCT_DETAILS_SUCCESS,
    PRODUCT_LIST_FAIL,
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_UPDATE_FAIL,
    PRODUCT_UPDATE_REQUEST,
    PRODUCT_UPDATE_SUCCESS,
  } from '../constants/productConstants'
  
  export const addProduct = product =&gt; async (dispatch, getState) =&gt; {
    try {
      dispatch({ type: PRODUCT_ADD_REQUEST })
  
      const {
        userLogin: { userInfo },
      } = getState()
  
  // USER INFO IS 'UNDEFINED' - ERROR: CANNOT READ PROPERTY OF DATA
  // ACTION WORKS WHEN REMOVING USERINFO FROM THE ACTION
  
      const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${userInfo.token}`,
        },
      }
  
      const { data } = await axios.post('/product', product, config)
  
      dispatch({
        type: PRODUCT_ADD_SUCCESS,
        payload: data,
      })
    } catch (error) {
      dispatch({
        type: PRODUCT_ADD_FAIL,
        payload:
          error.message &amp;&amp; error.response.data.message
            ? error.response.data.message
            : error.message,
      })
    }
  }
  
  export const listProducts = () =&gt; async dispatch =&gt; {
    try {
      dispatch({ type: PRODUCT_LIST_REQUEST })
  
      const { data } = await axios.get('/product')
  
      dispatch({
        type: PRODUCT_LIST_SUCCESS,
        payload: data,
      })
    } catch (error) {
      dispatch({
        type: PRODUCT_LIST_FAIL,
        payload:
          error.message &amp;&amp; error.response.data.message
            ? error.response.data.message
            : error.message,
      })
    }
  }
  
  export const listProductDetails = id =&gt; async dispatch =&gt; {
    try {
      dispatch({ type: PRODUCT_DETAILS_REQUEST })
  
      const { data } = await axios.get(`/product/${id}`)
  
      dispatch({
        type: PRODUCT_DETAILS_SUCCESS,
        payload: data,
      })
    } catch (error) {
      dispatch({
        type: PRODUCT_DETAILS_FAIL,
        payload:
          error.message &amp;&amp; error.response.data.message
            ? error.response.data.message
            : error.message,
      })
    }
  }
  
  export const updateProduct = product =&gt; async (dispatch, getState) =&gt; {
    try {
      dispatch({ type: PRODUCT_UPDATE_REQUEST })
  
      const {
        userLogin: { userInfo },
      } = getState()
  
      const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${userInfo.token}`,
        },
      }
  
      const { data } = await axios.put(`/product/${product._id}`, product, config)
  
      dispatch({
        type: PRODUCT_UPDATE_SUCCESS,
        payload: data,
      })
    } catch (error) {
      dispatch({
        type: PRODUCT_UPDATE_FAIL,
        payload:
          error.message &amp;&amp; error.response.data.message
            ? error.response.data.message
            : error.message,
      })
    }
  }
  
  export const deleteProduct = id =&gt; async (dispatch, getState) =&gt; {
    try {
      dispatch({ type: PRODUCT_DELETE_REQUEST })
  
      const {
        userLogin: { userInfo },
      } = getState()
  
      const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${userInfo.token}`,
        },
      }
  
      const { data } = await axios.delete(`/product/${id}`, config)
  
      dispatch({
        type: PRODUCT_DELETE_SUCCESS,
        payload: data,
      })
    } catch (error) {
      dispatch({
        type: PRODUCT_DELETE_FAIL,
        payload:
          error.message &amp;&amp; error.response.data.message
            ? error.response.data.message
            : error.message,
      })
    }
  }
  </code></pre>