Skip to content

Instantly share code, notes, and snippets.

View sunmeat's full-sized avatar
🐈
MEOW

Oleksandr Zahoruiko sunmeat

🐈
MEOW
View GitHub Profile
@sunmeat
sunmeat / different files.jsx
Last active June 14, 2025 13:31
форма регистрации и логина на редаксе
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
sunmeat / different files.jsx
Last active June 14, 2025 13:49
корзина на редаксе
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
sunmeat / gist:38a6c542cb660f6e5c8113b1f1010318
Created June 11, 2025 14:05
аутентификация на редаксе
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
sunmeat / different files.jsx
Last active June 14, 2025 12:17
color theme change (second slice) todo list redux example
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
sunmeat / different files.jsx
Last active June 14, 2025 11:57
todo list redux example
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
sunmeat / gist:7f29019605a5dec8d0f746f82e50b598
Created June 11, 2025 13:56
заготовка простейшего примера на редакс
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':
@sunmeat
sunmeat / different files.jsx
Created June 11, 2025 12:40
reactagram v.0.1 - useParams, useNavigate, useLocation, запросы
App.jsx:
import {
BrowserRouter,
Routes,
Route,
NavLink,
Link,
Outlet,
Navigate,
@sunmeat
sunmeat / App.jsx
Created June 10, 2025 12:33
error 404 example
...
function NotFound() {
return (
<div className="page-content">
<h1 className="page-title">404 - Страница не найдена</h1>
<p className="about-text">Извините, запрашиваемая страница не существует.</p>
<div className="link-group">
<Link to="/" className="page-link">Вернуться в ленту</Link>
<Link to="/profile" className="page-link">Профиль</Link>
@sunmeat
sunmeat / different files.jsx
Created June 10, 2025 11:46
react router outlet example
App.jsx:
import {BrowserRouter, Routes, Route, NavLink, Link, Outlet, Navigate} from 'react-router';
import './App.css';
import {useState} from "react";
function Home() {
return (
<div className="page-content">
<h1 className="page-title home-title">Лента</h1>
@sunmeat
sunmeat / different files.jsx
Last active July 2, 2025 16:42
link и navlink
App.jsx:
import {BrowserRouter, Routes, Route, NavLink, Link} from 'react-router';
import './App.css';
function Home() {
return (
<div className="page-content">
<h1 className="page-title home-title">Лента</h1>
<div className="post">