因此，createStore()Redux现在已弃用，configureStore()推荐使用@reduxjs/toolkit。
我很确定这与不能在我的行动中使用getState()获得userInfo状态有关。
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,
})
}
}
我是Redux的维护者，加上这句话的人"createStore已弃用"信息:)
请注意，这与实际的应用程序代码无关。它是专门给像您这样使用"普通redux"的用户的消息。-它试图告诉你，你正在遵循更难使用的模式，我们希望你使用Redux工具包，因为它会让你的生活更容易:)
您会注意到，这甚至不是在控制台中打印的运行时警告—它实际上只是编辑器中的一个可视指示符，就像
createStore请参阅这些Redux文档页面，了解为什么我们希望人们使用Redux Toolkit来编写Redux代码，以及如何这样做:
- 为什么Redux Toolkit是如何使用Redux今天
- 迁移到现代Redux
- Redux基础知识，第8部分:现代Redux与Redux工具包
- Redux Essentials, Part 2: Redux App Structure Redux 4.2.0版本说明
- 讨论:讨论更改Redux包以合并"Redux";和RTK"(来自我的广泛评论)
也可以像这样使用import:
import { legacy_createStore as createStore } from 'redux';
我得到了同样的警告，我做了VS代码告诉我要做的。我导入了legacy_createStore
import {legacy_createStore} from 'redux'
或者您可以使用别名，使您的代码保持不变。
import {legacy_createStore as createStore} from 'redux'
-
已弃用createStore。您正在使用普通redux创建一个redux存储。这种模式很难使用。这就是redux的创建者希望我们使用redux Toolkit的原因。您可以很容易地使用Redux工具包创建商店。从Redux Toolkit中，您可以使用configureStore，它封装了createStore API，并自动处理存储设置。
-
在大多数情况下，您应该使用
@reduxjs/toolkit包的configureStore方法，而不是直接调用createStore。由于configureStore在内部调用createStore，它不会消失，你的代码将继续工作，但如果你刚刚开始一个新项目，请注意，我们建议使用官方的Redux工具包自2019年以来任何新编写的Redux代码。查看更多细节===>https://redux.js.org/tutorials/fundamentals/part-8-modern-redux
伙计们，我现在是2023年，从Redux>= 4.0.0版本开始，configureStore是使用Redux Toolkit创建Redux存储的推荐方法。Redux Toolkit的configureStore封装了原始的createStore方法，并自动为我们处理大部分存储设置，因此首先安装reduxjs/Toolkit
npm install @reduxjs/toolkit
或者如果你是一个纺纱工
yarn add @reduxjs/toolkit
然后在指定位置
import { configureStore } from '@reduxjs/toolkit';
这个简单的导入显式地应用中间件，例如applyMiddleware, Redux Thunk和其他中间件。在我看来，更少的样板代码和简单，谁不想这样呢。