Redux Slice - 动作可能没有未定义的“类型”属性

Question

我目前正在关注 Coding Addict 的“React Phone E-Commerce Project”并学习使用 redux 而不是 context API。我遇到了一个错误：

（错误：动作可能没有未定义的“类型”属性。您可能拼错了动作类型字符串常量。）在完全使用 slice 遵循文档之后。

productSlice.js

import {createSlice} from '@reduxjs/toolkit';
import {storeProducts, detailProduct} from '../data';

export const productSlice = createSlice({
    name: 'products',
    initialState: {
        products: storeProducts,
        detailProduct: detailProduct,
    },

    reducers: {
        setProducts: (state, action) => {
            return {...state, products: [...action.payload]}
        },

        handleDetail: (state,action) => {
            return console.log('Hello from productSlice');
        }
    }
});

export const {setProducts, handleDetail} = productSlice.actions;

export default productSlice.reducer;

store.js

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

export default configureStore({
    reducer: {
        productSlice: productSlice,
    },
})

app.js

// CSS
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

// React Stuff
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// Redux Stuff
import { useSelector, useDispatch } from 'react-redux';
import {handleDetail, setProducts} from './redux/productSlice';

// Components
import Navbar from './Components/Navbar';
import ProductList from './Components/ProductList';
import Details from './Components/Details';
import Cart from './Components/Cart';
import Default from './Components/Default';


function App() {

    const products = useSelector((state) => state.productList.value);
    const dispatch = useDispatch();

    console.log(products);

    return (
        <Router>
            <Navbar />
            <Routes>
                <Route index path='/' element={<ProductList />} />
                <Route path='/details' element={<Details />} />
                <Route path='/cart' element={<Cart />} />
                <Route path='*' element={<Default />} />
            </Routes>
        </Router>
    );
};

export default App;

我知道 Redux Reducers 在负载中需要一个类型值。我在文档或其他涵盖 Redux Slice 的教程中没有看到任何关于类型的内容。

提前致谢！

Answer 1

Redux Toolkit 中的类型是你不需要关心的内部实现细节。由 RTK 动作创建者创建的任何内容都将具有类型并且可以安全地分派。

我会假设您不小心在某处分派了其他东西 - 但您根本没有共享任何调用分派的代码。如需更多输入，您必须共享移动代码。