React 应用程序使用 redux 可以工作，但使用 useSelector 时失败

Question

我用 React（redux 和 router）构建了一个小应用程序。这是一个市场（基于汽车）。它有两个主要组成部分。一张显示所有汽车，另一张显示最喜欢的汽车。每个项目上都有按钮可以添加或从收藏夹中删除，并且它可以工作。它从商店状态中删除和添加商品。我可以使用浏览器上的 redux 开发工具以及“handler”中的“console.log”和“store.getState()”来检查它。

但是我正在努力使用“useSelector(state => state.move_cars)”（move_cars是我唯一的减速器）而不是“store.getState()”。当使用“store.getState()”过滤收藏夹时，它可以工作并且应用程序会显示收藏夹。但是当使用“useSelector”时它是未定义的。所以我猜测我没有正确使用它，但我不知道它为什么不是一个数组。

我最喜欢的组件：

import React from 'react'
import style from "../components/styles/favorites.module.css";
import {store} from "../index.js"
import {move_cars} from "../"
import {useDispatch, useSelector} from "react-redux";
import {remove_car} from "../a_actions";
import cars from "../data/info/data.js";


const Favorites = () => {
  const images = require.context("../data/img", true);
  const dispatch = useDispatch();
  const selected = useSelector(state => state.move_cars);
  // const selected = store.getState();

  const handler = (e) => {
    // console.log("testing console from favs", selected);
    console.log("testing console from favs", selected);

    dispatch(remove_car(e));
  }

  return (
    <>
    <div className={style.container}>
          {cars.map( x => {
            // const checker = selected.some(item => item === x.Id);
                  if(true){
                        return (
                        <div className={style.car}>
                          <p className={style.textcartitle}> {x.Brand} &nbsp; </p>
                          <p className={style.textcar}>{Object.keys(x)[0]}: {x.Model} &nbsp; </p>
                          <p className={style.textcar}>{Object.keys(x)[1]}: {x.Hp} cv &nbsp;</p>
                          <p className={style.textcar}>{Object.keys(x)[3]}: {x.Year} &nbsp;</p>
                          <p className={style.textcar}>{Object.keys(x)[4]}: {x.City} &nbsp; </p>
                          <p className={style.textcar}>{Object.keys(x)[5]}: {x.Km} &nbsp;</p>
                          <img src={images(`${x.src}`)} className={style.imgin} alt="test"/>
                          <div value={x.Id} className={style.buttonfav} onClick={() => handler(x.Id)}>Remove from favorites</div>
                        </div>
                        );
                  }
          })}
    </div>
    </>
  )
}

export default Favorites

我的减速机：

let initialState = [];

export const move_cars = (state = initialState, action) => {

    switch(action.type){
        case "add_car":
            const varcheck = state.some((x) => x === action.payload);
            if (!varcheck) {
                return [...state, action.payload];
            }

        case "remove_car":
            return state.filter((car_id) => car_id !== action.payload )

        default:
            return state;
    }
}

我的主要index.js：

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

export const store = createStore(
  move_cars,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );  
  
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Answer 1

只需将选择器逻辑更改为：

const selected = useSelector(state => state);

会成功的。

您的整个 redux 状态由您的 move_cars 数组表示。所以 state 参数本身就是你想要检索的汽车列表。

这就是方法 store.getState() 正常工作并返回结果列表的原因。