CODEWITHSUNDEEP
reduxredux-toolkit
Aidenhsy
Aidenhsy

Reputation: 1601

Dispatch in Redux ToolKit not Changing state

I am trying to pass data to my redux store with the help of redux toolkit, but I'm unable to do so. I double checked that there is no problem with my data. Here is my code:

//USER DETAILS
export const userDetailsSlice = createSlice({
  name: 'userDetails',
  initialState: { loading: 'idle', user: {} },
  reducers: {
    userDetailsLoading(state) {
      if (state.loading === 'idle') {
        state.loading = 'pending';
      }
    },
    userDetailsReceived(state, action) {
      if (state.loading === 'pending') {
        state.loading = 'idle';
        state.user = action.payload;
      }
    },
    userDetailsError(state, action) {
      if (state.loading === 'pending') {
        state.loading = 'idle';
        state.error = action.payload;
      }
    },
  },
});

export const {
  userDetailsLoading,
  userDetailsReceived,
  userDetailsError,
} = userDetailsSlice.actions;

export const getUserDetails = (id) => async (dispatch, getState) => {
  dispatch(userRegisterLoading());
  try {
    const {
      userLogin: { userInfo },
    } = getState();
    const config = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${userInfo.token}`,
      },
    };
    const { data } = await axios.get(`/api/users/${id}`, config);
    console.log(data);
    dispatch(userDetailsReceived(data));
  } catch (error) {
    dispatch(userDetailsError(error.toString()));
  }
};

I console logged my data right before the dispatch action: console log so the data is definitely there. Therefore I think there's something wrong with my code. Here is my code for my redux store:

import { configureStore } from '@reduxjs/toolkit';
import { photoListSlice, photoCreateSlice } from './photo';
import { userRegisterSlice, userLoginSlice, userDetailsSlice } from './user';

const reducer = {
  userRegister: userRegisterSlice.reducer,
  userLogin: userLoginSlice.reducer,
  userDetails: userDetailsSlice.reducer,
};

const store = configureStore({ reducer });

export default store;

As seen from this photo: photo the action userDetailsReceived was called but the state for user did not change.

Any help or hint would be greatly appreciated!!

Upvotes: 2

Views: 1380

Answers (1)

Aidenhsy
Aidenhsy

Reputation: 1601

I made a typo on the first dispatch call of getUserDetails function, I dispatched userRegisterLoading instead of userDetailsLoading... Now it works fine after the change.

export const getUserDetails = (id) => async (dispatch, getState) => {
  dispatch(userDetailsLoading());
  try {
    const {
      userLogin: { userInfo },
    } = getState();
    const config = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${userInfo.token}`,
      },
    };
    const { data } = await axios.get(`/api/users/${id}`, config);
    console.log(data);
    dispatch(userDetailsReceived(data));
  } catch (error) {
    dispatch(userDetailsError(error.toString()));
  }
};

Upvotes: 1

Related Questions