Redux createStore() 已棄用 - 無法在 Redux 操作中從 getState() 獲取 state

Question

因此， createStore() Redux 現在已棄用，建議使用@reduxjs/toolkit中的configureStore() 。

我很確定這與無法在我的操作中使用getState()獲取userInfo state 有關。

userLogin的getState()返回undefined 。 但是當我刪除getState()時，該操作有效。

店鋪：

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

行動：

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

我是 Redux 維護者，並且添加了“不推薦使用createStore ”消息的人 :)

作為記錄，這與您的實際應用程序代碼無關。 這是給像你這樣使用“plain Redux”的用戶的特別信息——它試圖告訴你你正在遵循更難使用的模式，我們希望你改用 Redux Toolkit，因為它會讓你的生活更美好容易得多:)

您會注意到，這甚至不是在控制台中打印的運行時警告——它實際上只是編輯器中的一個視覺指示器，例如createStore .

請參閱這些 Redux 文檔頁面，詳細了解我們為什么希望人們使用 Redux Toolkit 編寫 Redux 代碼，以及如何這樣做：

• 為什么 Redux Toolkit 是今天如何使用 Redux
• Redux 基礎，第 8 部分：使用 Redux 工具包的現代 Redux
• Redux Essentials，第 2 部分：Redux 應用程序結構

Answer 2

我收到了同樣的警告，我按照 VS 代碼告訴我的去做。 我導入了 legacy_createStore。

import {legacy_createStore} from 'redux'

或者您可以使用別名，以便您的代碼保持不變。

import {legacy_createStore as createStore} from 'redux'

Answer 3

您也可以像這樣使用導入：

import { legacy_createStore as createStore } from 'redux';

Answer 4

只需使用 createStore，它就可以工作，而棄用的消息與此無關。

Answer 5

• createStore 已棄用。 您正在使用普通 Redux 創建 redux 存儲。 這種模式更難使用。 這就是為什么 redux 的創建者希望我們使用 Redux Toolkit 的原因。 您可以使用 Redux 工具包非常輕松地創建商店。 從 Redux 工具包中，您可以使用 configureStore 來包裝 createStore API 並自動處理存儲設置。

• 在大多數情況下，您應該使用@reduxjs/toolkit package 的configureStore方法，而不是直接調用createStore 。 由於configureStore在內部調用createStore ，它不會消失，您的代碼將繼續工作，但如果您剛剛開始一個新項目，請注意我們建議使用官方 Redux 工具包來處理自 2019 年以來新編寫的任何 Redux 代碼。

  更多細節===>https://redux.js.org/tutorials/fundamentals/part-8-modern-redux

Answer 6

使用redux ：

如果您想在沒有此視覺棄用警告的情況下使用createStore ，請改用legacy_createStore導入：

import { legacy_createStore as createStore } from "redux";

使用redux-toolkit ：

Redux Toolkit是我們今天推薦的編寫 Redux 邏輯的方法，包括存儲設置、reducer、數據獲取等。

Redux Toolkit有一個configureStore API，它是createStore的改進版本，可簡化（存儲）設置並有助於避免常見錯誤。 configureStore圍繞 Redux 核心createStore API 進行包裝，並自動為我們處理大部分商店設置。

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

https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#using-configurestore