我用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} </p>
<p className={style.textcar}>{Object.keys(x)[0]}: {x.Model} </p>
<p className={style.textcar}>{Object.keys(x)[1]}: {x.Hp} cv </p>
<p className={style.textcar}>{Object.keys(x)[3]}: {x.Year} </p>
<p className={style.textcar}>{Object.keys(x)[4]}: {x.City} </p>
<p className={style.textcar}>{Object.keys(x)[5]}: {x.Km} </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>
);
型
1条答案
按热度按时间zzoitvuj1#
只需将选择器逻辑更改为:
字符串
就可以了
您的整个redux状态由您的move_汽车数组表示。因此,state参数本身就是要检索的汽车列表。
这就是为什么方法 * store.getState()* 能够正常工作并返回结果列表的原因。