reactjs - 反应减速器工具包调度不起作用

Question

我写了个人资料页面，我想从 api 获取个人资料数据，但我的调度不起作用，在 getProfileDetails 函数调度不起作用。

import {createSlice} from "@reduxjs/toolkit";
import axios from "../components/axios";
import urls from "../components/Urls";
import authHeader from "../components/authHeader";

const profileSlice = createSlice({
    name: 'profile',
    initialState: {
        profileDetails: [],
    },
    reducers: {
        setProfileDetails: (state, action) => {
            state.profileDetails = action.payload;
            //return { profileDetails: action.payload };
        },
    }
});

export const getProfileDetails = (dispatch) => {
    axios.get(urls.user_details, { headers: authHeader() }).then((response) => {
        dispatch(setProfileDetails(response.data.results[0]));
    }).catch(e => {
        console.log(e);
    });
}

export const { setProfileDetails } = profileSlice.actions;
export default profileSlice.reducer;

标签： reactjsreact-redux

Answer 1

reducer 必须始终返回一个新对象，因此您的注释版本实际上更好。最好是这样的：

const profileSlice = createSlice({
  name: 'profile',
  initialState: {
    profileDetails: [],
  },
  reducers: {
    setProfileDetails: (state, action) => ({ ...state, profileDetails: action.payload }),
  }
});