使用redux的React应用程序可以工作,但使用useSelector失败

chhqkbe1  于 2023-08-05  发布在  React
关注(0)|答案(1)|浏览(151)

我用React(Redux和Router)构建了一个小应用程序。这是一个市场(基于汽车)。它有两个主要组成部分。一个显示所有的汽车,另一个显示最喜欢的车。每个项目上都有按钮可以添加或从收藏夹中删除,而且它很有效。它从商店的状态中删除和添加项目。我可以用浏览器上的redux开发工具和“handler”中的“console.log”和“store.getState()"来检查它。
但是我正在使用“useSelector(state => state.move_汽车)”(move_cars是我唯一的reducer)而不是“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>
);

zzoitvuj

zzoitvuj1#

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

const selected = useSelector(state => state);

字符串
就可以了
您的整个redux状态由您的move_汽车数组表示。因此,state参数本身就是要检索的汽车列表。
这就是为什么方法 * store.getState()* 能够正常工作并返回结果列表的原因。

相关问题