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,
})
}
}