Redux devtools 显示未定义状态但呈现完美

Question

我现在正在试用 Redux Toolkit，因为我一直在我的 React 应用程序中使用以前的 Redux 方法。因此，在设置完所有内容并获取数据后，我浏览器中的 Redux DevTools 在状态选项卡中显示 undefined。但是操作选项卡完美地显示了类型、有效负载和元数据。数据也被完美呈现，没有任何问题。

“操作”选项卡如下所示：

这是状态选项卡：

它不是应该填充所有数据吗？为什么未定义？

代码如下：

productSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import productService from './productService';

const initialState = {
    products: null,
    isError: false,
    isSuccess: false,
    isLoading: false,
    message: ''
}

// Fetch Products 
export const getProducts = createAsyncThunk('product/getAllProducts', async (thunkAPI) => {
    try {
        return await productService.getAllProducts();
    } catch (error) {
        const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString();
        return thunkAPI.rejectWithValue(message);
    }
})

export const productSlice = createSlice({
    name: 'product',
    initialState,
    reducers: {
        reset: (state) => {
            state.isLoading = false;
            state.isSuccess = false;
            state.isError = false;
            state.message = ''
        }
    },
    extraReducers: (builder) => {
        builder
            .addCase(getProducts.pending, (state) => {
                state.isLoading = true;
            })
            .addCase(getProducts.fulfilled, (state, action) => {
                state.isLoading = false;
                state.isSuccess = true;
                state.products = action.payload.data;
            })
            .addCase(getProducts.rejected, (state, action) => {
                state.isLoading = false;
                state.isError = true;
                state.message = action.payload.message;
                state.products = null;
            })
    }
});

export const { reset } = productSlice.actions;
export default productSlice.reducer;

productService.js

import axios from 'axios';

const API_URL = '/api/products';

const getAllProducts = async () => {
    const response = await axios.get(API_URL);
    return response.data;
}

const productService = {
    getAllProducts
}

export default productService;

store.js

import { configureStore } from "@reduxjs/toolkit";
import productReducer from './product/productSlice';

const store = configureStore({
    reducer: {
        products: productReducer
    }
});

export default store;

Answer 1

您似乎在商店中错误地注册了此切片。商店中有 'getProducts' 个切片名称，而不是 'product'。

Redux devtools 显示未定义状态但呈现完美

Redux devtools showing undefined state but rendering perfectly

reactjs

redux

redux-devtools

react-redux

redux-toolkit