Блог

этот мир кода должен следить за состоянием корзины, содержащей кучу ставок, сделанных пользователем

const { games } = useSelector((state: any) => state.cart) когда я перехожу к другому компоненту, подобному этому

<AppRecentUserGame games={games} filter={gameChoice} />

на главной странице он должен получить эту константу игр, а затем отобразить фильтр списка ставок по типу или нет

 interface AppRecentUserGameProps {
  games: Bet[];
  filter: GameTypes;
}

export const AppRecentUserGame = ({
  games,
  filter
}: AppRecentUserGameProps) => {
  const [filterGame, setFilterGame] = useState("");
  useEffect(() => {
    setFilterGame(filter.type);
  }, [filter]);

  const filteredGames = () => {
    if (filterGame === "") {
      return !!games.length ? (
        games.map((game: any) => (
          <CartItem key={game.id} color={game.color}>
            <p>{formatNumberInArray(game.gameNumbers)}</p>
            <div>
              <p>
                {dateFormatValue(new Date(game.betDate))} - (
                {priceFormatted(game.price)})
              </p>
            </div>
            <strong>{game.type}</strong>
          </CartItem>
        ))
      ) : (
        <EmptyContainer>
          <EmptyCart />
        </EmptyContainer>
      );
    } else if (games amp;amp; filter) {
      const filterGame = games.filter((game) => game.type === filter.type);
      return filterGame.map((game: any) => (
        <CartItem key={game.id} color={game.color}>
          <p>{formatNumberInArray(game.gameNumbers)}</p>
          <div>
            <p>
              {dateFormatValue(new Date(game.betDate))} - (
              {priceFormatted(game.price)})
            </p>
          </div>
          <strong>{game.type}</strong>
        </CartItem>
      ));
    }
  };

  return <>{filteredGames()}</>;
};
 

всякий раз, когда пользователь сохраняет сделанные им ставки, ставки на групповую ОС должны заполнять корзину, которую позже все будут использовать, чтобы показать пользователю список ставок, которые он сделал на домашней странице
. Вот как я обрабатываю процесс сохранения

 const [cartsGames, setCartGames] = useState<Bet[]>([])  
const saveGame = () => {
    try {
      if (totalPrice < 30) {
        const minPrice = gameType["min-cart-value"] 
        throw new Error(
          `Adicione pelo menos ${priceFormatted(minPrice)} em Apostas`)
      }
      cartsGames.forEach((game) => {
        dispatch(CartActions.addToCart(game)) 
        console.log(game)
      }) 
      setCartGames([]) 
      setMessageToUser({
        description: "Aposta Feita, Boa Sorte!",
        color: "var(--spinner)",
        active: true,
      }) 
      setRedirect(true) 
    } catch (error) {
      setMessageToUser({
        description: error.message,
        color: "var(--blue)",
        active: true,
      }) 
    }
  } 
 

here is my store

 import { configureStore } from "@reduxjs/toolkit";
import { cartSlice } from "./cartSlc";
import { userSlice } from "./userSlc";
export const store = configureStore({
  reducer: {
    user: userSlice.reducer,
    cart: cartSlice.reducer
  },
}); 

 

the userSlice:

 
import { SignedUpUserProps } from "../types/userSignup";

const initialState: SignedUpUserProps = {
  users: [
    {
      id: "1",
      name: "test",
      email: "test@gmail.com",
      password: "123456789",
      recentGames: [],
    },

  ],
  isLogged: false,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: { // actions
    createUser(state, action) {
      const newUser = action.payload;
      state.users.push(newUser);
    },
    logIn(state) {
      state.isLogged = true;
    },
    logOut(state) {
      state.isLogged = false;
    },
    saveInRecentGames(state, action) {
      const users = [...state.users];
      const user = users.find((user) => user.id === action.payload.id);
      if (user) {
        const prevState: any = [...user.recentGames];
        user.recentGames.push(prevState, ...action.payload.games);
      }
    },
  },
});

const UserActions = userSlice.actions;
export { userSlice, UserActions };
 

ломтик тележки

 import { createSlice } from "@reduxjs/toolkit";
import { Cart } from "../types/cart";


const initialState: Cart = {
 game: [],
 totalPrice: 0,
};

const cartSlice = createSlice({
 name: "cart",
 initialState,
 reducers: {
   addToCart(state, action) {
     const newBet = action.payload
     state.game.push(newBet)
     state.totalPrice = state.totalPrice   newBet.price
   },
 },
})
const CartActions = cartSlice.actions
export { cartSlice, CartActions }
 

Вы выбираете свои государственные игры с «s», но когда я смотрю на ваш срез, он называется без «s».

const { games } = useSelector((state: any) => state.cart)

const initialState: Cart = { game: [], totalPrice: 0, };