1

I have built a small app with React (redux and router). It's a marketplace (cars based). It has two main components. One showing all the cars and the other one showing the favorites. There are buttons on every item to add or remove from favorites and it works. Its removing and adding items from state on store. I can check it with redux dev tool on browser and with "console.log" from "handler" with "store.getState()".

But I'm strugling using "useSelector(state => state.move_cars)" (move_cars is my only reducer) instead of "store.getState()". When filtering favs with "store.getState()" it works and the app shows favorites. But when using "useSelector" it's undefined. So I'm gessing that i'm not using it properly but I don't know how it's not an array.

My favs component:

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

My reducer:

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;
    }
}

My main 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>
);
bashop
  • 11
  • 1
  • I think you just want to change `const selected = useSelector(state => state.move_cars);` to `const selected = useSelector(state => state);` – Joe Lissner Jul 11 '23 at 18:30
  • Generally, you are using an extremely outdated style of Redux here. For any Redux logic since 2019, the official recommendation is to use the official Redux Toolkit, which is about 1/4 of the code. You can read more on modern Redux here: https://redux.js.org/introduction/why-rtk-is-redux-today If you need a tutorial, take a look at the official Redux tutorial: https://redux.js.org/tutorials/essentials/part-1-overview-concepts – phry Jul 11 '23 at 19:19

1 Answers1

0

Simply changing your selector logic to:

const selected = useSelector(state => state);

will do the trick.

Your entire redux state is represented by your move_cars array. So the state parameter itself is the list of cars you want to retrieve.

This is the reason why the method store.getState() is working correctly and returning the list of results.

Ardit Mirashi
  • 191
  • 6