sunmeat

import { useState, useEffect } from 'react';
import { create } from 'zustand'; // npm install zustand
import './App.css';

// создание zustand store для управления корзиной и товарами
const useStore = create((set, get) => ({
    products: [], // список доступных товаров
    cartItems: [], // товары в корзине
    status: 'idle', // статус загрузки (idle, loading, succeeded, failed)
    error: null, // сообщение об ошибке

sunmeat

App.jsx:

import {useSelector, useDispatch, Provider} from 'react-redux';
import {configureStore, createSlice} from '@reduxjs/toolkit';
import {useState, useEffect} from 'react';
import './App.css';

// действия для асинхронного поиска товаров с использованием redux-thunk
export const fetchProducts = (searchQuery = '') => async (dispatch) => {
    dispatch(setStatus('loading')); // установка статуса загрузки

sunmeat

App.jsx:

// импортируем хуки и компонент Provider из react-redux
import {useSelector, useDispatch, Provider} from 'react-redux'

// !!! npm install react-redux @reduxjs/toolkit !!!

// хук useSelector позволяет получить доступ к состоянию хранилища - единственного центра данных для всего приложения
// в хранилище (store) обычно лежит один большой объект — дерево состояния, для всего
// useSelector "селектит" (выбирает) нужный кусок данных из этого глобального состояния

Cliv-create

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function WelcomeMessage() {
    return (
        <>
            <h3>Hello! It's a test project to see how React + Vite and Typescript works!</h3>
            <p>My name is <a href="https://github.com/Cliv-create">Cliv-create</a> and im a student learning to become a software engineer!</p>

sunmeat

App.jsx:

import {useSelector, useDispatch, Provider} from 'react-redux';
import {configureStore, createSlice, createAsyncThunk} from '@reduxjs/toolkit';
import {useState} from 'react';
import './App.css';

// создание асинхронного thunk для имитации логина
export const loginUser = createAsyncThunk(
    'auth/loginUser', // имя действия

sunmeat

App.jsx:

import {useSelector, useDispatch, Provider} from 'react-redux';
import {configureStore, createSlice, createAsyncThunk} from '@reduxjs/toolkit';
import {useEffect} from 'react';
import './App.css';

// создание асинхронного thunk для имитации загрузки товаров
export const fetchProducts = createAsyncThunk(
    'cart/fetchProducts', // имя действия

sunmeat

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { useState } from 'react';

// слайс для аутентификации
const authSlice = createSlice({
    name: 'auth',
    initialState: {
        user: null,
        isAuthenticated: false,

sunmeat

App.jsx:

import {useSelector, useDispatch, Provider} from 'react-redux';
import {configureStore, createSlice} from '@reduxjs/toolkit';
import {useState} from 'react';
import './App.css';

// создание среза (slice) для управления задачами
const todoSlice = createSlice({
    name: 'todo', // имя среза

sunmeat

App.jsx:

import {useSelector, useDispatch, Provider} from 'react-redux';
import {configureStore, createSlice} from '@reduxjs/toolkit';
import {useState} from 'react';
import './App.css';

// создание среза (slice) для управления задачами
const todoSlice = createSlice({
    name: 'todo', // имя среза

sunmeat

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
// npm install redux react-redux

// редьюсер для счетчика
const counterReducer = (state = { count: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':