kaineer

import classes from './NewTask.module.css'
import { TodosSlice } from '../../slices/todo';
import { useDispatch } from 'react-redux'

export const NewTask = ({ addTask }) => {
  const { actions: { appendTask } } = TodosSlice;
  const dispatch = useDispatch();

  const handleEnter = (e) => {
    if (e.key === 'Enter') {

kaineer

import { useDispatch } from 'react-redux';
import { TodosSlice } from '../../slices/todo'
import classes from './Task.module.css'
import clsx from 'clsx'

export const Task = ({ task }) => {
  const { actions: { removeTask, toggleTask } } = TodosSlice;
  const dispatch = useDispatch();

  return (

kaineer

import { Task } from './Task'
import { TodosSlice } from '../../slices/todo';
import { useSelector } from 'react-redux';

export const TaskList = () => {
  const { selectors: { getTasks } } = TodosSlice;
  const tasks = useSelector(getTasks);

  return (
    <ul>

kaineer

//
import { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { NewTask } from './NewTask'
import { TaskList } from './TaskList'
import { TodosSlice } from '../../slices/todo';

export const Todos = () => {
  const {
    selectors: { getTasks },

kaineer

//
import { createSlice } from '@reduxjs/toolkit'

const localStorageKey = 'todos/items';

const initialState = () => {
  try {
    const storageTasks = JSON.parse(
      localStorage.getItem(localStorageKey));
    return { tasks: storageTasks }

kaineer

import { useEffect, useState, useRef } from 'react';
import { useParams } from 'react-router-dom'

import classes from './page-user.module.css'

const InputRow = ({ id, title, value, setValue }) => {
  return (
  <div className={ classes.row }>
    <label htmlFor={ id }>{ title }</label>
    <input

kaineer

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'

import classes from './page-user.module.css'

export const PageUser = () => {
  const { id } = useParams();
  const [ user, setUser ] = useState({});

  useEffect(() => {

kaineer

import classes from './page.module.css'
import { useRef, useState } from 'react'

export const PageFetch = () => {
  const urlRef = useRef("");
  const resultRef = useRef("");
  const bodyRef = useRef("{}");
  const [method, setMethod] = useState("GET");

  const hasBody = ["POST", "PUT"].includes(method);

kaineer

План занятия

---

Часть первая, useState, onChange

• Создаем страницу, например /page4
• На страницу помещаем два компонента
• В каждом компоненте рендерим один текстовый инпут
• Изменение текста в одном инпуте должно приводить к немедленному изменению текста в другом и наоборот

kaineer

Ставим redux toolkit

$ npm install -SE react-redux @reduxjs/toolkit

Создаем слайс, который будет хранить состояние

// src/slices/color.js