Redux createStore() is deprecated - Cannot get state from getState() in Redux action

Question

So, the createStore() Redux is now deprecated and configureStore() is recommended from @reduxjs/toolkit.

I'm pretty sure it's related to not being able to get userInfo state using getState() in my actions.

getState() of userLogin returns undefined. But when I remove getState(), the action works.

STORE:

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

ACTION:

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 => async (dispatch, getState) => {
  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 && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

export const listProducts = () => async dispatch => {
  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 && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

export const listProductDetails = id => async dispatch => {
  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 && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

export const updateProduct = product => async (dispatch, getState) => {
  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 && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

export const deleteProduct = id => async (dispatch, getState) => {
  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 && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

Answer 1

I'm a Redux maintainer, and the person who added that "createStore is deprecated" message :)

For the record this has nothing to do with your actual application code. It is specifically a message to users like you who are using "plain Redux" - it's trying to tell you that you're following patterns that are much harder to use, and we want you to use Redux Toolkit instead because it will make your life much easier :)

You'll note that this isn't even a runtime warning being printed in the console - it's literally just a visual indicator in your editor, like createStore.

Please see these Redux docs pages for more details on why we want people using Redux Toolkit to write Redux code, and how to do so:

• Why Redux Toolkit is How To Use Redux Today
• Migrating to Modern Redux
• Redux Fundamentals, Part 8: Modern Redux with Redux Toolkit
• Redux Essentials, Part 2: Redux App Structure
• Redux 4.2.0 release notes
• Discussion: Debate changing Redux packages to merge "Redux" and RTK" (extensive comment from me)

Answer 2

Also you can use import like this:

import { legacy_createStore as createStore } from 'redux';

Answer 3

I was getting the same warning, and I did what VS code told me to do. I imported legacy_createStore.

import {legacy_createStore} from 'redux'

Or you can use an alias so that your code remains the same.

import {legacy_createStore as createStore} from 'redux'

Answer 4

• The createStore is deprecated. You are creating a redux store using vanilla Redux. This pattern is much harder to use. That's why the creator of redux wants us to use Redux Toolkit. You can create store using Redux toolkit very easily. From Redux Toolkit you can use configureStore which wraps around createStore API and handle the store setup automatically.

• In most cases, you should be using the configureStore method of the @reduxjs/toolkit package instead of calling createStore directly. As configureStore is calling createStore internally, it will not be going away, and your code will continue working but if you are just starting a new project, please be aware that we recommend using the official Redux Toolkit for any newly written Redux code since 2019.

  for more detail ===> https://redux.js.org/tutorials/fundamentals/part-8-modern-redux

Answer 5

Guys I am in 2023 and as of Redux >= version 4.0.0 , configureStore is the recommended way to create a Redux store using Redux Toolkit. Redux Toolkit's configureStore wraps around the original createStore method, and handles most of the store setup for us automatically, so initially install reduxjs/toolkit

npm install @reduxjs/toolkit

or if you are a yarn-er

yarn add @reduxjs/toolkit

and then where it's intended

import { configureStore } from '@reduxjs/toolkit';

That simple import explicitly applies middleware eg applyMiddleware, Redux Thunk and other middlewares for you. In my opinion less boilerplate code and just simplicity,and who wouldn't want that.