所以我有一个非常简单的react应用程序。它在第一个渲染器上渲染了一些汽车，当你点击细节时，它会把你带到另一个路由器，并根据它的ID只显示那辆车。
当你按照正确的顺序，打开页面，redux被填充数据，汽车卡呈现出来，然后你点击“细节”按钮，react-router介入并根据我们看到的汽车ID将我们路由到某个特定的汽车ID。
但是.在这一点上，当你尝试点击重新渲染页面，我从我的redux商店什么也没有得到，我需要做什么？我需要在我的每个组件，需要redux商店获取项目，如果没有？
x1c 0d1x的数据

的

这是我在redux的片段

import { createSlice, createEntityAdapter, createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

const carAdapter = createEntityAdapter();

// async action
export const fetchCars = createAsyncThunk('cars', async () =>{
  const car = await axios.get('http://localhost:5000/api/cars');
  return car.data.data
});

const carSlice = createSlice({
  name: 'cars',
  initialState: carAdapter.getInitialState({
    status: 'idle',
    error: null
  }),
  reducers:{
  },
  extraReducers :{
    [fetchCars.pending]: (state, action) => {
      state.status = 'loading'
    },
    [fetchCars.fulfilled]: (state, action) => {
      state.status = 'fulfilled'
      carAdapter.setAll(state, action.payload)
    },
    [fetchCars.rejected]: (state, action) => {
      state.status = 'failed'
      state.error = action.error.message
    }
  }
})

export const {
  selectAll: selectAllCars,
  selectById : selectCarById,
} = carAdapter.getSelectors(state => state.cars)

export default carSlice.reducer

字符串
这是我的第一个页面，在这里我从我的API渲染所有的车辆

import React, { useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { fetchCars, selectAllCars } from '../features/car/carSlice'
import './car.css'

export default function Car() {
  const dispatch = useDispatch();
  const carStatus = useSelector(state => state.cars.status)
  const cars = useSelector(selectAllCars)

  useEffect(() => {
    if(carStatus === 'idle') {

      dispatch(fetchCars());
    }
  }, [dispatch, carStatus])

  return (
    <>
      {
        cars.map(car => {
          return (
            <div key={car.id} className="card">
              <img src={car.vehiclePhoto} alt="vehicle" className="vehicle-img" />
              <div className="card-container">
              <h4>{car.vehicleName}</h4>
              <p>{car.price}</p>
              <Link to={car.id}>Details</Link>
              </div>
            </div>
          )
        })
      }
    </>
  )
}

型
这就是当您尝试重新加载页面时问题开始的地方

export default function Car({ match: { params: { id } } }) {
    const state =  useSelector(state => state)
    const car = selectCarById(state, id);

  return (
    <div className="card">
    { car ? 
      <>
      <img src={car.vehiclePhoto} alt="vehicle" class="vehicle-img" />
      <div className="card-container">
        <h4>{car.vehicleName}</h4>
        <p>{car.price}</p>
      </div>
      </> : 'loading...'
    }
    </div>
    )
}

型