时间戳

首页 > 解决方案 > Redux ToolKit 中的调度未更改状态

redux - Redux ToolKit 中的调度未更改状态

问题描述

我试图在 redux 工具包的帮助下将数据传递到我的 redux 存储，但我无法这样做。我仔细检查了我的数据没有问题。这是我的代码：

//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()));
  }
};

我在调度操作之前控制台记录了我的数据：控制台日志所以数据肯定在那里。因此我认为我的代码有问题。这是我的 redux 商店的代码：

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;

从这张照片中可以看出：照片调用了操作 userDetailsReceived 但用户的状态没有改变。

任何帮助或提示将不胜感激！！

标签： reduxredux-toolkit

解决方案

我在 getUserDetails 函数的第一次调度调用上打错了，我调度了 userRegisterLoading 而不是 userDetailsLoading... 现在它在更改后工作正常。

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()));
  }
};

推荐阅读