我一直在写我的第一个react/redux应用程序。作为一个用户，我想通过点击星星给我最喜欢的项目添加一个星星。之后，星数应该更新。我显示了所有的项目与Map（）并使用Card组件来显示它们。我可以在redux工具中看到，当我单击一个项目时，我的操作会被触发，它甚至会获得正确的有效负载（我点击的项目的id）。但是我在我的reducer中得到的代码没有得到执行（我用一个简单的console.log以及更复杂的代码试过）。我不知道我错过了什么。

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
      <App />  
    </Provider>

);

应用程序js

import Card from './Components/Card.js';
import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import * as actions from './actions';

function App() {
  const burgers = useSelector(state => state.burgers);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <div className="App-header">
      </div>

     <div style={{display: 'flex', flexDirection: 'column'}}>
       {burgers.map((item) => 
        <Card img={item.image} title={item.name} price={item.price} stars={item.stars} key={item.name} id={item.id}/>
      )}
      </div>
    </div>
  );

}

export default App;

卡片.js

import './card.css'
import { BsFillStarFill } from "react-icons/bs";
import { useSelector, useDispatch } from 'react-redux';
import * as actions from './actions';

export default function Card(props) {
    const { title, price, stars, img, id } = props;
    const dispatch = useDispatch();
    const handleClick = event => {
        dispatch(actions.addStar(event.currentTarget.id));
      };
    return (<div className="card">
        <div className="card-header">

        </div>
        <div className="card-body">
            <div className="card-title">{title}</div>
            <div className="price">Price: ${price}</div>
            <div className="rating" id={id} onClick={handleClick}>
                <div className="star">
                    <BsFillStarFill />
                </div>
                <div className="count">
                    {stars}
                </div>

            </div>

        </div> 

    </div>)
}

操作.js

import * as actions from './actionTypes.js'

export function addStar(id) {
    return {
        type: actions.ADD_STAR,
        payload: {
            id: id
        }
    }
}

还原器/索引.js

import { combineReducers } from 'redux';
import { sortBurgers, updateStarCount } from './sortBurgers.js';

const rootReducer = combineReducers({
    starCount: updateStarCount,
    burgers: sortBurgers
})

export default rootReducer;

sortBurgers.js（我的还原器）

export const burgers = [
        {
            id: 1,
            image: hamburger,
            name: "Hamburger",
            price: 1.25,
            stars: 0
        },
        {
            id: 2,
            image: baconBurger,
            name: "Bacon Burger",
            price: 2.50,
            stars: 0
        },
        {
            id: 3,
            image: doubleMeatBurger,
            name: "Double Meat Burger",
            price: 3.75,
            stars: 0
        },
        {
            id: 4,
            image: doubleCheeseBurger,
            name: "Double Cheese Burger",
            price: 5.00,
            stars: 0
        }
    ]

    export const updateStarCount = (state = burgers, action) => {
        switch(action.type) {
            case action.ADD_STAR:  
            console.log(action.payload.id);
            let starcount = state.map((item) => {
                return item.id
            } );
            let starIndex = starcount.indexOf(action.payload.id);
            console.log(starIndex);
                return [...state.slice(0, starIndex), state[starIndex].stars + 1, ...state.slice(starIndex + 1)]
            default:
                return state
        }
    }

操作类型.js

export const ADD_STAR = "ADD_STAR";
export const TEST = "TEST";
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";