redux-toolkit: 在哪里派发一个动作？

Question

我正在尝试使用 React 构建一个特斯拉克隆网站 redux-toolkit 我有 3 个不同的组件 组件：（Header、主页、详细信息） 每当我从导航中单击模型时，我想切换 详细信息组件 并显示我的 data.js 文件中的特定汽车数据但我无法发送操作，我该怎么做？

carSlice

import { createSlice } from "@reduxjs/toolkit";
import data from "../data/data";

const initialState = {
  cars: data,
}

const carSlice = createSlice({
  name: "car",
  initialState,
  reducers: {
    teslaCars: (state, action) => {
      state.cars = action.payload;
    },
  },
});

export const { teslaCars } = carSlice.actions;
export default carSlice.reducer;

商店

import { configureStore } from "@reduxjs/toolkit";
import carReducer from "./carSlice";

const store = configureStore({
  reducer: {
    car: carReducer,
  },
});

export default store;

Header 组件

import React from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import logo from "../images/logo.svg";
import "../styles/Header.css";

const Header = () => {
  const nav = useSelector((state) => state.car.cars);
  return (
    <header className="header">
      <div className="logo-wrapper">
        <Link to="/">
          <img src={logo} alt="logo" />
        </Link>
      </div>
      <div className="navigation-wrapper">
        <ul className="navbar">
          {nav.map((link) => (
            <li key={link.id} className="nav-link">
              <Link to={`/details/${link.id}`}>{link.name}</Link>
            </li>
          ))}
        </ul>
      </div>
      <div className="user-navigation-wrapper">
        <ul className="navbar">
          <li className="nav-link">
            <Link to="/details">Shop</Link>
          </li>
          <li className="nav-link">
            <Link to="/details">Account</Link>
          </li>
          <li className="nav-link">
            <Link to="/details">Menu</Link>
          </li>
        </ul>
      </div>
    </header>
  );
};

export default Header;

主页组件

import React from "react";
import { useSelector } from "react-redux";
import "../styles/Home.css";

const Home = () => {
  const allCars = useSelector((state) => state.car.cars);

  return (
    <div className="landing-page">
      {allCars.map((car) => (
        <div key={car.id} className={car.classname}>
          <div className="container">
            <div className="title">
              <h1>{car.name}</h1>
              <p>
                Order online for <a href="/">touchless delivery</a>
              </p>
            </div>
            <div className="buttons">
              <button className="co-button">Custom order</button>
              <button className="ei-button">Existing inventory</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Home;

详细信息组件

import React from "react";
import { useParams } from "react-router";
import { useSelector } from "react-redux";
import "../styles/Details.css";

const Details = () => {
  const { carId } = useParams();

  return (
    <div className="details-page">
      <div className="model-s">
        <div className="container">
          <div className="title">
            <h1>Model s</h1>
            <p>Plaid</p>
          </div>
          <div className="info">
            <div className="milage">
              <h2>390mi</h2>
              <p>Range (est.)</p>
            </div>
            <div className="zero-to-sixty">
              <h2>1.99s</h2>
              <p>0-60 mph*</p>
            </div>
            <div className="top-speed">
              <h2>200mph</h2>
              <p>Top speed</p>
            </div>
            <div className="horsepower">
              <h2>1,020hp</h2>
              <p>Peak power</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Details;

HOME COMPONENT SCREENSHOT

Answer 1

使用 useSelector() Hook 从状态中获取汽车详细信息并映射数据

 import React from "react";
    import { useParams } from "react-router";
    import { useSelector } from "react-redux";
    import "../styles/Details.css";
    
    const Details = () => {
      const { carId } = useParams();

    /*using useSelector() Hook, get carDetails from the state object*/
    const carDetails= useSelector(state=>state.car.cars.filter(car=>car.id===carId))

      return (
    <div className="details-page">
          ... 
          ...
      </div>
  );
};

redux-toolkit: 在哪里派发一个动作？

redux-toolkit: Where to dispatch an action?

reactjs

redux

react-redux

redux-toolkit

carSlice

商店

Header 组件

主页组件

详细信息组件