React.js

Никакого отношения к стадиям жизненного цикла синхронизация дополнительных эффектов

  class DogInfo extends React.Component {    controller = null;    state = { dog: null };    fetchDog() {      this.controller?.abort();      this.controller = new AbortController();      getDog(this.props.dogId, { signal: this.controller.signal }).then(        (dog) => {          this.setState({ dog });        },        (error) => {          // обработка ошибок        }      );    }    componentDidMount() {      this.fetchDog();    }    componentDidUpdate(prevProps) {      // обработка изменения dogId      if (prevProps.dogId !== this.props.dogId) {        this.fetchDog();      }    }    componentWillUnmount() {      // отмена запроса      this.controller?.abort();    }    render() {      return <div>{/* рендеринг информации о собаке */}</div>;    }  }

  function DogInfo({ dogId }) {    const controllerRef = React.useRef(null);    const [dog, setDog] = React.useState(null);    function fetchDog() {      controllerRef.current?.abort();      controllerRef.current = new AbortController();      getDog(dogId, { signal: controllerRef.current.signal }).then(        (d) => setDog(d),        (er) => {          // обработка ошибок        }      );    }    // didMount    React.useEffect(() => {      fetchDog();      // eslint-disable-next-line react-hooks/exhaustive-deps    }, []);    // didUpdate    const prevDogId = usePrevious(dogId);    useUpdate(() => {      if (prevDogId !== dogId) {        fetchDog();      }    });    // willUnmount    React.useEffect(() => {      return () => {        controllerRef.current?.abort();      };    }, []);    return <div>{/* рендеринг информации о собаке */}</div>;  }  function usePrevious(value) {    const ref = useRef();    useEffect(() => {      ref.current = value;    }, [value]);    return ref.current;  }

  function DogInfo({ dogId }) {    const [dog, setDog] = useState(null);    useEffect(() => {      const controller = new AbortController();      getDog(dogId, { signal: controller.signal }).then(        (d) => setDog(d),        (er) => {          // обработка ошибок        }      );      return () => controller.abort();    }, [dogId]);    return <div>{/* рендеринг информации о собаке */}</div>;  }

Могу я игнорировать eslint-plugin-react-hooks/exhaustive-deps?

Один большой useEffect

  class ChatFeed extends React.Component {    componentDidMount() {      this.subscribeToFeed();      this.setDocumentTitle();      this.subscribeToOnlineStatus();      this.subscribeToGeoLocation();    }    componentWillUnmount() {      this.unsubscribeFromFeed();      this.restoreDocumentTitle();      this.unsubscribeFromOnlineStatus();      this.unsubscribeFromGeoLocation();    }    componentDidUpdate(prevProps, prevState) {      // ... сранение пропсов, повторной подписки и т.д.    }    render() {      return <div>{/* интерфейс чата */}</div>;    }  }

  function ChatFeed() {    React.useEffect(() => {      // подписка на ленту      // установка заголовка документа      // перевод статуса в онлайн      // определения местоположения      return () => {        // отписка от ленты        // восстановление заголовка        // перевод статуса в офлайн        // отключение определения местоположения      };    });    return <div>{/* интерфейс чата */}</div>;  }

  function ChatFeed() {    React.useEffect(() => {      // подписка на ленту      return () => {        // отписка от ленты      };    });    React.useEffect(() => {      // установка заголовка документа      return () => {        // восстановление заголовка      };    });    React.useEffect(() => {      // перевод статуса в онлайн      return () => {        // перевод статуса в офлайн      };    });    React.useEffect(() => {      // определения местоположения      return () => {        // отключение определения местоположения      };    });    return <div>{/* интерфейс чата */}</div>;  }

Внешние функции

  // до. Не делайте так  function DogInfo({ dogId }) {    const [dog, setDog] = React.useState(null);    const controllerRef = React.useRef(null);    const fetchDog = React.useCallback((dogId) => {      controllerRef.current?.abort();      controllerRef.current = new AbortController();      return getDog(dogId, { signal: controller.signal }).then(        (d) => setDog(d),        (error) => {          // обработка ошибок        }      );    }, []);    React.useEffect(() => {      fetchDog(dogId);      return () => controller.current?.abort();    }, [dogId, fetchDog]);    return <div>{/* рендеринг информации о собаках */}</div>;  }

  function DogInfo({ dogId }) {    const [dog, setDog] = React.useState(null);    React.useEffect(() => {      const controller = new AbortController();      getDog(dogId, { signal: controller.signal }).then(        (d) => setDog(d),        (error) => {          // обработка ошибок        }      );      return () => controller.abort();    }, [dogId]);    return <div>{/* рендеринг информации о собаках */}</div>;  }

Заключение

const UserForm = () =>  <FormBlock>    <UserInfo/>    <Experience/>    <Education/>  </FormBlock>

Попробуем реализовать компонент UserInfo

const UserInfo = ({  firstName,  onChangeFirstName,  lastName,  onChangeLastName,}) =>  <FormBlock>    <Label>First Name</Label>    <Input       value={firstName}      onChange={({ target: { value } }) => onChangeFirstName(value)}    />    <Label>Last Name</Label>    <Input      value={lastName}      onChange={({ target: { value } }) => onChangeLastName(value)}    />  </FormBlock>

const UserForm = ({  firstName,  onChangeFirstName,  lastName,  onChangeLastName,}) =>  <FormBlock>    <UserInfo      firstName={firstName}      onChangeFirstName={onChangeFirstName}      lastName={lastName}      onChangeLastName={onChangeLastName}    />  </FormBlock>

const UserForm = (props) =>  <FormBlock>    <UserInfo {...props} />    <Experience {...props} />    <Education {...props} />  </FormBlock>

Что мы можем с этим всем сделать?

const UserInfo = ({  name,  value,  onChange,}) =>  <FormBlock>    <Label>First Name</Label>    <Input       name={'firstName'}       value={value['firstName']}       onChange={({ target }) => onChange({target: { name, value: { ...value, [target.name]: target.value } }})}    />    <Label>Last Name</Label>    <Input      value={lastName}      onChange={({ target: { value } }) => onChangeLastName(value)}    />  </FormBlock>

{ firstName, lastName, positionName, positionDescription, name, description }

const UserForm = ({  name,  value,  onChange,}) =>  <FormBlock>    <UserInfo       value={value}       onChange={({ target }) => onChange({target: { name, value: target.value }})}    />   .......  </FormBlock>

{  userInfo: { firstName, lastName },  position: { positionName, positionDescription },  education: { name, description }}

const UserForm = ({  name,  value,  onChange,}) =>  <FormBlock>    <UserInfo       name={'userInfo'}       value={value['userInfo']}       onChange={({ target }) => onChange({target: { name, value: { ...value, [target.name]: target.value } }})}    />   .......  </FormBlock>

Как сделать код компактней и читабельней?

const UserInfo = ({ name, value, onChange }) => {   const innerProps = getInnerProps({name, value, onChange})   return <FormBlock>    <Label>First Name</Label>    <Input {...innerProps.forInput('firstName')} />    <Label>Last Name</Label>    <Input {...innerProps.forInput('lastName')} />  </FormBlock>}const UserForm = ({  name,  value,  onChange,}) => {  const innerProps = getInnerProps({name, value, onChange})  return <FormBlock>    <UserInfo {...innerProps.forInput('userInfo')} />    <Experience {...innerProps.forInput('position')} />    <Education {...innerProps.forInput('education')} />  </FormBlock>}

Усложним пример

const UserForm = ({  educations,  onChangeEducation,}) =>  <FormBlock>    {Object.entries(educations).map(([id, education]) => <Education      name={name}      description={description}      onChangeName={(name) => onChangeEducation(id, { ...education, name })}      onChangeDescription={(description) => onChangeEducation(id, { ...education, description })}    />}  </FormBlock>

const UserForm = ({  educations,  onChangeEducations,}) =>  <FormBlock>    {Object.entries(educations).map(([id, education]) => <Education      name={name}      description={description}      onChangeName={(name) => onChangeEducations({ ...educations, [id]: { ...education, name } })}      onChangeDescription={(description) => onChangeEducations({ ...educations, [id]: { ...education, description } })}    />}  </FormBlock>

const UserForm = ({  name,  value,  onChange,}) => {  const onChangeEducation=({ target }) => useConstant(onChange({    target: {      name,      value: {        ...value,        educations: { ...value.educations, [target.name]: target.value ] }      }    }  }))  return <FormBlock>  {Object.entries(educations).map(([id, education]) => <Education      name={id}      value={education}       onChange={onChangeEducation}    />  )}  </FormBlock>

const Education = ({ name, value, onChange }) => {   const innerProps = getInnerProps({name, value, onChange})   return <FormBlock>    <Label>Name</Label>    <Input {...innerProps.forInput('name')} />    <Label>Description</Label>    <Input {...innerProps.forInput('description')} />  </FormBlock>}const Educations = ({ name, value, onChange }) => {   const innerProps = getInnerProps({name, value, onChange})   return Object.keys(value).map((id) =>     <Education {...innerProps.forInput('id')} />  )}const UserForm = ({  name,  value,  onChange,}) => {  const innerProps = getInnerProps({name, value, onChange})  return <FormBlock>    <UserInfo {...innerProps.forInput('userInfo')} />    <Experience {...innerProps.forInput('position')} />    <Educations {...innerProps.forInput('educations')} />  </FormBlock>}

Несколько слов про стейт

const reducer = (state = initState, action) {  switch(action.type) {    case CHANGE_FIRST_NAME:       return { ...state, userInfo: { ...state.userInfo, firstName: action.payload } }    case CHANGE_LAST_NAME:       return { ...state, userInfo: { ...state.userInfo, lastName: action.payload } }   ........  }}

const reducer = (state = initState, action) {  switch(action.type) {    case SET_USER_FORM_DATA:       return { ...state, value: action.payload }     ........  }}

const UserFormContainer = () => {  const dispatch = useDispatch()  return <UserForm    value={useSelector(({ userForm }) => userForm?.value)}    onChange={({target: { value } }) => dispatch(userFormActions.set(value)}  />}

Когда применять описанный подход

Резюме

• name
• value,
• onChange({target: { name, value }})

1. Обноление состояния с помощью useState()

import { useState } from 'react'function DoubleIncreaser() {  const [count, setCount] = useState(0)  const doubleIncreaseHandler = () => {    setCount(count + 1)    setCount(count + 1)  }  return (    <>      <button onClick={doubleIncreaseHandler}>        Double Increase      </button>      <div>Count: {count}</div>    </>  )}

import { useState } from 'react'function DoubleIncreaser() {  const [count, setCount] = useState(0)  const doubleIncreaseHandler = () => {    setCount(actualCount => actualCount + 1)    setCount(actualCount => actualCount + 1)  }  return (    <>      <button onClick={doubleIncreaseHandler}>        Double Increase      </button>      <div>Count: {count}</div>    </>  )}

import { useState } from 'react'function DoubleIncreaser() {  const [count, setCount] = useState(0)  const doubleIncrease = () => {    let actualCount = count    actualCount = actualCount + 1    actualCount = actualCount + 1    setCount(actualCount)  }  return (    <>      <button onClick={this.doubleIncrease}>        Double Increase      </button>      <div>Count: {count}</div>    </>  )}

2. Состояние иммутабельно (неизменяемо) и доступно только для чтения

function FetchUsers() {  const [users, setUsers] = useState([])  useEffect(() => {    const startFetching = async () => {      const response = await fetch('/users')      const fetchedUsers = await response.json()      setUsers(fetchedUsers)      console.log(users)        // => []      console.log(fetchedUsers) // => ['John', 'Jane', 'Alice', 'Bob']    }    startFetching()  }, [])  return (    <ul>      {users.map(user => <li>{user}</li>)}    </ul>  )}

  function FetchUsers() {    const [users, setUsers] = useState([])    useEffect(() => {      const startFetching = async () => {        const response = await fetch('/users')        const fetchedUsers = await response.json()        users = fetchedUsers       // Неправильно! users доступна только для чтения        users.push(...fetchedUsers) // Неправильно! users иммутабельна        setUsers(fetchedUsers)     // Правильно!      }      startFetching()    }, [])    return (      <ul>        {users.map(user => <li>{user}</li>)}      </ul>    )  }

3. Обновление состояния в классовом компоненте

import { Component } from 'react';class DoubleIncreaser extends Component {  state = {    count: 0  };  render() {    return (      <>        <button onClick={this.doubleIncrease}>          Double Increase        </button>        <div>Count: {this.state.count}</div>      </>    );  }  doubleIncrease = () => {    // Работает!    this.setState(({ count }) => ({      count: count + 1    }));    this.setState(({ count }) => ({      count: count + 1    }));    // Не работает!    // this.setState({ count: this.state.count + 1 });    // this.setState({ count: this.state.count + 1 });  }}

4. Заключение

• Ключевые концепции React
• React Router
• Интернационализация в React
• Тестирование в React
• React Redux
• React Native
• Библиотеки для React
• Разное (много разного, включая хуки)

TL;DR

Context и Redux это одно и тоже?

Является ли контекст инструментом управления состоянием?

Являются ли Context и useReducer() заменой Redux?

Когда следует использовать контекст?

Когда следует использовать Context и useReducer()?

Когда следует использовать Redux?

• Большое количество компонентов с состояниями, в которых используются одни и те же данные
• Состояние приложение часто обновляется
• Сложная логика обновления состояния
• Приложение имеет среднюю или большую кодовую базу и над ним работает много людей
• Вы хотите знать когда, почему и как обновляется состояние приложения и иметь возможность визуализировать эти изменения
• Вам требуются более мощные возможности по управлению побочными эффектами, стабильностью (постоянством) и сериализацией данных

Понимание Context и Redux

• Для чего он предназначен
• Какие задачи он решает
• Когда и зачем он был создан

Что такое контекст?

Использование контекста

• Вызываем const MyContext = React.createContext() для создания экземпляра объекта контекста
• В родительском компоненте рендерим &ltMyContext.Provider value={someValue}>. Это помещает некоторые данные в контекст. Эти данные могут быть чем угодно: строкой, числом, объектом, массивом, экземпляром класса, обработчиком событий и т.д.
• Получаем значение контекста в любом компоненте внутри провайдера, вызывая const theContextValue = useContext(MyContext)

import { createContext } from 'react'export const MyContext = createContext()export function ParentComponent({ children }) {  const [counter, setCounter] = useState(0)  return (    <MyContext.Provider value={[counter, setCounter]}>      {children}    </MyContext.Provider>  )}

import { useContext } from 'react'import { MyContext } from './MyContext'export function NestedChildComponent() {  const [counter, setCounter] = useContext(MyContext)  // ...}

Цель и случаи использования контекста

Что такое Redux?

• Управление состоянием
• Цель Redux определение того, почему и как произошло изменение состояния

Redux и React

Цель и случаи использования (React-)Redux

• Полное разделение логики управления состоянием и слоя UI
• Распределение логики управления состоянием между разными слоями UI (например, в процессе перевода приложения с AngularJS на React)
• Использование возможностей Redux middleware для добавления дополнительной логики при инициализации операций
• Возможность сохранения частей состояния Redux
• Возможность получения отчетов об ошибках, которые могут быть воспроизведены другими разработчиками
• Возможность быстрой отладки логики и UI во время разработки

Почему контекст не является инструментом управления состоянием?

• Сохранение начального значения
• Получение текущего значения
• Обновление значения

• Сохранять начальное значение путем вызова хука
• Получать текущее значение также посредством вызова хука
• Обновлять значение, вызывая функцию setState() или dispatch(), соответственно
• Узнавать об обновлении состояния благодаря повторному рендерингу компонента

• Redux сохраняет начальное значение путем вызова корневого редуктора (root reducer), позволяет читать текущее значение с помощью store.getState(), обновлять значение с помощью store.dispatch(action) и получать уведомления об обновлении состояния через store.subscribe(listener)
• MobX сохраняет начальное значение путем присвоения значения полю класса хранилища, позволяет читать текущее значение и обновлять его через поля хранилища и получать учведомления об обновлении состояния с помощью методов autorun() и computed()

React Context не соответствует названным критериям. Поэтому он не является инструментом управления состоянием

Сравнение Context и Redux

• Context
• • Ничего не хранит и ничем не управляет
  • Работает только в компонентах React
  • Передает ниже простое (единственное) значение, которое может быть чем угодно (примитивом, объектом, классом и т.д.)
  • Позволяет читать это простое значение
  • Может использоваться для предотвращения бурения
  • Показывает текущее значение для компонентов Provider и Consumer в инструментах разработчика, но не показывает историю изменений этого значения
  • Обновляет потребляющие компоненты при изменении значения, но не позволяет пропустить обновление
  • Не предоставляет механизма для обработки побочных эффектов отвечает только за рендеринг
  
  
• React+Redux
• • Хранит и управляет простым значением (обычно, этим значением является объект)
  • Работает с любым UI, а также за пределами React-компонентов
  • Позволяет читать это простое значение
  • Может использоваться для предотвращения бурения
  • Может обновлять значение путем инициализации операций и запуска редукторов
  • Инструменты разработчика показывают историю инициализации операций и изменения состояния
  • Предоставляет возможность использования middleware для обработки побочных эффектов
  • Позволяет компонентам подписываться на обновления хранилища, извлекать определенные части состояния хранилища и контролировать повторный рендеринг компонентов
  
  

Context и useReducer()

• Сохраненное значение
• Функцию-редуктор
• Возможность инициализации операций
• Возможность передачи значения и его чтения во вложенных компонентах

• Context + useReducer() основан на передаче текущего значения через контекст. React-Redux передает через контекст текущий экземпляр хранилища Redux
• Это означает, что когда useReducer() производит новое значение, все компоненты, подписанные на контекст, принудительно перерисовываются, даже если они используют только часть данных. Это может привести к проблемам с производительностью в зависимости от размера значения состояния, количества подписанных компонентов и частоты повторного рендеринга. При использовании React-Redux компоненты могут подписываться на определенную часть значения хранилища и перерисовываться только при изменении этой части

• Контекст + useReducer() являются встроенными возможностями React и не могут использоваться за его пределами. Хранилище Redux не зависит от UI, поэтому может использоваться отдельно от React
• React DevTools показывают текущее значение контекста, но не историю его изменений. Redux DevTools показывают все инициализированные операции, их содержимое (тип и полезную нагрузку, type and payload), состояние после каждой операции и разницу между состояниями
• useReducer() не имеет middleware. Некоторые побочные эффекты можно обработать с помощью хука useEffect() в сочетании с useReducer(), я даже встречал отдельные попытки оборачивания useReducer() в нечто похожее на middleware, однако всему этому далеко до функционала и возможностей Redux middleware

Выбор правильного инструмента

Обзор случаев использования

• Context
  
  • Передача данных вложенным компонентам без бурения
  
  
• useReducer()
  
  • Управление состоянием сложного компонента с помощью функции-редуктора
  
  
• Context + useReducer()
  
  • Управление состоянием сложного компонента с помощью функции-редуктора и передача состояния вложенным компонентам без бурения
  
  
• Redux
  
  • Управление очень сложным состоянием с помощью функций-редукторов
  • Прослеживаемость того, когда, почему и как менялось состояние в течение времени
  • Желание полной изоляции логики управления состоянием от слоя UI
  • Распределение логики управления состоянием между разными слоями UI
  • Использование возможностей middleware для реализации дополнительной логики при инициализации операций
  • Возможность сохранения определенных частей состояния
  • Возможность получения воспроизводимых отчетов об ошибках
  • Возможность быстрой отладки логики и UI в процессе разработки
  
  
• Redux + React-Redux
  
  • Все случаи использования Redux + возможность взаимодействия React-компонентов с хранилищем Redux
  
  

Рекомендации

• Если вам требуется просто избежать бурения, используйте контекст
• Если у вас имеется сложное состояние, но вы не хотите использовать сторонние библиотеки, используйте контекст + useReducer()
• Если вам требуется хорошая трассировка изменений состояния во времени, управлемый повторный рендеринг определенных компонентов, более мощные возможности обработки побочных эффектов и т.п., используйте Redux + React-Redux

Клиент

yarn create react-app form-validation# илиnpm init react-app form-validation# илиnpx create-react-app form-validation

public  index.htmlsrc  App.js  index.js  styles.jsserver.js...

# для клиентаyarn add styled-components react-hook-form# для сервера (производственные зависимости)yarn add express express-validator cors# для сервера (зависимость для разработки)yarn add -D nodemon# для одновременного запуска серверовyarn add concurrently

<head>  ...  <link rel="preconnect" href="http://personeltest.ru/aways/fonts.gstatic.com" />  <link    href="http://personeltest.ru/aways/fonts.googleapis.com/css2?family=Comfortaa&display=swap"    rel="stylesheet"  /></head>

• Имя
  
  • от 2 до 10 символов
  • кириллица
  
  
• Email
  
  • особых требований не предъявляется
  
  
• Пароль
  
  • 8-12 символов
  • латиница: буквы в любом регистре, цифры, нижнее подчеркивание и дефис
  
  

// импорт инструментовimport styled, { createGlobalStyle } from 'styled-components'// глобальные стилиconst GlobalStyle = createGlobalStyle`  body {    margin: 0;    min-height: 100vh;    display: grid;    place-items: center;    background-color: #1c1c1c;    font-family: 'Comfortaa', cursive;    font-size: 14px;    letter-spacing: 1px;    color: #f0f0f0;  }`// заголовокconst StyledTitle = styled.h1`  margin: 1em;  color: orange;`// формаconst StyledForm = styled.form`  margin: 0 auto;  width: 320px;  font-size: 1.2em;  text-align: center;`// подписьconst Label = styled.label`  margin: 0.5em;  display: grid;  grid-template-columns: 1fr 2fr;  align-items: center;  text-align: left;`// проект поля для ввода данныхconst BaseInput = styled.input`  padding: 0.5em 0.75em;  font-family: inherit;  font-size: 0.9em;  letter-spacing: 1px;  outline: none;  border: none;  border-radius: 4px;`// обычное полеconst RegularInput = styled(BaseInput)`  background-color: #f0f0f0;  box-shadow: inset 0 0 2px orange;  &:focus {    background-color: #1c1c1c;    color: #f0f0f0;    box-shadow: inset 0 0 4px yellow;  }`// поле для отправки данных на серверconst SubmitInput = styled(BaseInput)`  margin: 1em 0.5em;  background-image: linear-gradient(yellow, orange);  cursor: pointer;  &:active {    box-shadow: inset 0 1px 3px #1c1c1c;  }`// проект сообщения с текстомconst BaseText = styled.p`  font-size: 1.1em;  text-align: center;  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);`// сообщение об ошибкеconst ErrorText = styled(BaseText)`  font-size: ${(props) => (props.small ? '0.8em' : '1.1em')};  color: red;`// сообщение об успехеconst SuccessText = styled(BaseText)`  color: green;`// экспорт стилизованных компонентовexport {  GlobalStyle,  StyledTitle,  StyledForm,  Label,  RegularInput,  SubmitInput,  ErrorText,  SuccessText}

import React from 'react'import ReactDOM from 'react-dom'// импортируем глобальные стилиimport { GlobalStyle } from './styles'import App from './App'ReactDOM.render(  <React.StrictMode>    {/* подключаем глобальные стили */}    <GlobalStyle />    <App />  </React.StrictMode>,  document.getElementById('root'))

import { useState } from 'react'// импорт хука для валидации формыimport { useForm } from 'react-hook-form'// импорт стилизованных компонентовimport {  StyledTitle,  StyledForm,  Label,  RegularInput,  SubmitInput,  ErrorText,  SuccessText} from './styles'// компонент заголовкаfunction Title() {  return <StyledTitle>Валидация формы</StyledTitle>}// компонент формыfunction Form() {  // инициализируем начальное состояние  const [result, setResult] = useState({    message: '',    success: false  })  // извлекаем средства валидации:  // регистрация проверяемого поля  // ошибки и обработка отправки формы  const { register, errors, handleSubmit } = useForm()  // общие валидаторы  const validators = {    required: 'Не может быть пустым'  }  // функция отправки формы  async function onSubmit(values) {    console.log(values)    const response = await fetch('http://localhost:5000/server', {      method: 'POST',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify(values)    })    const result = await response.json()    // обновляем состояние    setResult({      message: result,      success: response.ok    })  }  // нажатие кнопки сброса полей в исходное состояние приводит к перезагрузке страницы  function onClick() {    window.location.reload()  }  return (    <>      <StyledForm onSubmit={handleSubmit(onSubmit)}>        <Label>          Имя:          <RegularInput            type='text'            name='name'            // поля являются неуправляемыми            // это повышает производительность            ref={register({              ...validators,              minLength: {                value: 2,                message: 'Не менее двух букв'              },              maxLength: {                value: 10,                message: 'Не более десяти букв'              },              pattern: {                value: /[А-ЯЁ]{2,10}/i,                message: 'Только киррилица'              }            })}            defaultValue='Иван'          />        </Label>        {/* ошибки */}        <ErrorText small>{errors.name && errors.name.message}</ErrorText>        <Label>          Email:          <RegularInput            type='email'            name='email'            ref={register({              ...validators,              pattern: {                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,                message: 'Неправильный адрес электронной почты'              }            })}            defaultValue='email@example.com'          />        </Label>        <ErrorText small>{errors.email && errors.email.message}</ErrorText>        <Label>          Пароль:          <RegularInput            type='password'            name='password'            ref={register({              ...validators,              pattern: {                value: /^[A-Z0-9_-]{8,12}$/i,                message:                  'От 8 до 12 символов: латиница, цифры, нижнее подчеркивание и дефис'              }            })}            defaultValue='password'          />        </Label>        <ErrorText small>          {errors.password && errors.password.message}        </ErrorText>        <SubmitInput type='submit' defaultValue='Отправить' />        {/* обратите внимание на атрибут "as", он позволяет превратить "инпут" в кнопку с аналогичными стилями */}        <SubmitInput as='button' onClick={onClick}>          Сбросить        </SubmitInput>      </StyledForm>      {/* результат отправки формы */}      {result.success ? (        <SuccessText>{result.message}</SuccessText>      ) : (        <ErrorText>{result.message}</ErrorText>      )}    </>  )}export default function App() {  return (    <>      <Title />      <Form />    </>  )}

Сервер

const express = require('express')// body читает тело запроса// validationResult - результат валидацииconst { body, validationResult } = require('express-validator')const cors = require('cors')const app = express()const PORT = process.env.PORT || 5000app.use(cors())app.use(express.json())app.use(express.urlencoded({ extended: false }))// валидаторыconst validators = [  body('name').trim().notEmpty().isAlpha('ru-RU').escape(),  body('email').normalizeEmail().isEmail(),  // кастомный валидатор  body('password').custom((value) => {    const regex = /^[A-Z0-9_-]{8,12}$/i    if (!regex.test(value)) throw new Error('Пароль не соответствует шаблону')    return true  })]// валидаторы передаются в качестве middlewareapp.post('/server', validators, (req, res) => {  // извлекаем массив с ошибками из результата валидации  const { errors } = validationResult(req)  console.log(errors)  // если массив с ошибками не является пустым  if (errors.length) {    res.status(400).json('Регистрация провалилась')  } else {    res.status(201).json('Регистрация прошла успешно')  }})app.listen(PORT, () => {  console.log(`Сервер готов. Порт: ${PORT}`)})

"scripts": {  "start": "react-scripts start",  "build": "react-scripts build",  "server": "nodemon server",  "dev": "concurrently \"yarn server\" \"yarn start\""}

Введение

Компоненты

Функциональные компоненты

//  Классовые компоненты являются "многословными"class Counter extends React.Component {  state = {    counter: 0,  }  constructor(props) {    super(props)    this.handleClick = this.handleClick.bind(this)  }  handleClick() {    this.setState({ counter: this.state.counter + 1 })  }  render() {    return (      <div>        <p>Значение счетчика: {this.state.counter}</p>        <button onClick={this.handleClick}>Увеличить</button>      </div>    )  }}//  Функциональные компоненты легче читать и поддерживатьfunction Counter() {  const [counter, setCounter] = useState(0)  handleClick = () => setCounter(counter + 1)  return (    <div>      <p>Значение счетчика: {counter}</p>      <button onClick={handleClick}>Увеличить</button>    </div>  )}

Согласованные (последовательные) компоненты

Названия компонентов

//  Этого следует избегатьexport default () => <form>...</form>//  Именуйте свои функцииexport default function Form() {  return <form>...</form>}

Вспомогательные функции

//  Этого следует избегатьfunction Component({ date }) {  function parseDate(rawDate) {    ...  }  return <div>Сегодня {parseDate(date)}</div>}//  Размещайте вспомогательные функции перед компонентомfunction parseDate(date) {  ...}function Component({ date }) {  return <div>Сегодня {parseDate(date)}</div>}

//  Вспомогательные функции не должны "читать" значения из состояния компонентаexport default function Component() {  const [value, setValue] = useState('')  function isValid() {    // ...  }  return (    <>      <input        value={value}        onChange={e => setValue(e.target.value)}        onBlur={validateInput}      />      <button        onClick={() => {          if (isValid) {            // ...          }        }}      >        Отправить      </button>    </>  )}//  Поместите их снаружи и передавайте им только необходимые значенияfunction isValid(value) {  // ...}export default function Component() {  const [value, setValue] = useState('')  return (    <>      <input        value={value}        onChange={e => setValue(e.target.value)}        onBlur={validateInput}      />      <button        onClick={() => {          if (isValid(value)) {            // ...          }        }}      >        Отправить      </button>    </>  )}

Статическая (жесткая) разметка

//  Статическую разметку сложно поддерживатьfunction Filters({ onFilterClick }) {  return (    <>      <p>Жанры книг</p>      <ul>        <li>          <div onClick={() => onFilterClick('fiction')}>Научная фантастика</div>        </li>        <li>          <div onClick={() => onFilterClick('classics')}>            Классика          </div>        </li>        <li>          <div onClick={() => onFilterClick('fantasy')}>Фэнтези</div>        </li>        <li>          <div onClick={() => onFilterClick('romance')}>Романы</div>        </li>      </ul>    </>  )}//  Используйте циклы и объекты с настройкамиconst GENRES = [  {    identifier: 'fiction',    name: 'Научная фантастика',  },  {    identifier: 'classics',    name: 'Классика',  },  {    identifier: 'fantasy',    name: 'Фэнтези',  },  {    identifier: 'romance',    name: 'Романы',  },]function Filters({ onFilterClick }) {  return (    <>      <p>Жанры книг</p>      <ul>        {GENRES.map(genre => (          <li>            <div onClick={() => onFilterClick(genre.identifier)}>              {genre.name}            </div>          </li>        ))}      </ul>    </>  )}

Размеры компонентов

Комментарии в JSX

function Component(props) {  return (    <>      {/* Если пользователь оформил подписку, мы не будем показывать ему рекламу */}      {user.subscribed ? null : <SubscriptionPlans />}    </>  )}

Предохранители

function Component() {  return (    <Layout>      <ErrorBoundary>        <CardWidget />      </ErrorBoundary>      <ErrorBoundary>        <FiltersWidget />      </ErrorBoundary>      <div>        <ErrorBoundary>          <ProductList />        </ErrorBoundary>      </div>    </Layout>  )}

Деструктуризация пропов

//  Не повторяйте "props" в каждом компонентеfunction Input(props) {  return <input value={props.value} onChange={props.onChange} />}//  Деструктурируйте и используйте значения в явном видеfunction Component({ value, onChange }) {  const [state, setState] = useState('')  return <div>...</div>}

Количество пропов

Передача объекта вместо примитивов

//  Не передавайте значения по одному<UserProfile  bio={user.bio}  name={user.name}  email={user.email}  subscription={user.subscription}/>//  Вместо этого, используйте объект<UserProfile user={user} />

Условный рендеринг

//  Старайтесь избегать коротких вычисленийfunction Component() {  const count = 0  return <div>{count && <h1>Сообщения: {count}</h1>}</div>}//  Вместо этого, используйте тернарный операторfunction Component() {  const count = 0  return <div>{count ? <h1>Сообщения: {count}</h1> : null}</div>}

Вложенные тернарные операторы

//  Вложенные тернарники сложно читатьisSubscribed ? (  <ArticleRecommendations />) : isRegistered ? (  <SubscribeCallToAction />) : (  <RegisterCallToAction />)//  Извлеките их в отдельный компонентfunction CallToActionWidget({ subscribed, registered }) {  if (subscribed) {    return <ArticleRecommendations />  }  if (registered) {    return <SubscribeCallToAction />  }  return <RegisterCallToAction />}function Component() {  return (    <CallToActionWidget      subscribed={subscribed}      registered={registered}    />  )}

Списки

//  Не объединяйте циклы с другой разметкойfunction Component({ topic, page, articles, onNextPage }) {  return (    <div>      <h1>{topic}</h1>      {articles.map(article => (        <div>          <h3>{article.title}</h3>          <p>{article.teaser}</p>          <img src={article.image} />        </div>      ))}      <div>Вы находитесь на странице {page}</div>      <button onClick={onNextPage}>Дальше</button>    </div>  )}//  Извлеките список в отдельный компонентfunction Component({ topic, page, articles, onNextPage }) {  return (    <div>      <h1>{topic}</h1>      <ArticlesList articles={articles} />      <div>Вы находитесь на странице {page}</div>      <button onClick={onNextPage}>Дальше</button>    </div>  )}

Пропы по умолчанию

//  Не определяйте значения пропов по умолчанию за пределами функцииfunction Component({ title, tags, subscribed }) {  return <div>...</div>}Component.defaultProps = {  title: '',  tags: [],  subscribed: false,}//  Поместите их в список аргументовfunction Component({ title = '', tags = [], subscribed = false }) {  return <div>...</div>}

Вложенные функции рендеринга

//  Не вкладывайте одни компоненты в другиеfunction Component() {  function renderHeader() {    return <header>...</header>  }  return <div>{renderHeader()}</div>}//  Извлекайте их в отдельные компонентыimport Header from '@modules/common/components/Header'function Component() {  return (    <div>      <Header />    </div>  )}

Управление состоянием

Редукторы

//  Не используйте слишком много частей состоянияconst TYPES = {  SMALL: 'small',  MEDIUM: 'medium',  LARGE: 'large'}function Component() {  const [isOpen, setIsOpen] = useState(false)  const [type, setType] = useState(TYPES.LARGE)  const [phone, setPhone] = useState('')  const [email, setEmail] = useState('')  const [error, setError] = useSatte(null)  return (    // ...  )}//  Унифицируйте их с помощью редуктораconst TYPES = {  SMALL: 'small',  MEDIUM: 'medium',  LARGE: 'large'}const initialState = {  isOpen: false,  type: TYPES.LARGE,  phone: '',  email: '',  error: null}const reducer = (state, action) => {  switch (action.type) {    ...    default:      return state  }}function Component() {  const [state, dispatch] = useReducer(reducer, initialState)  return (    // ...  )}

Хуки против HOC и рендер-пропов

//  Не используйте рендер-пропыfunction Component() {  return (    <>      <Header />        <Form>          {({ values, setValue }) => (            <input              value={values.name}              onChange={e => setValue('name', e.target.value)}            />            <input              value={values.password}              onChange={e => setValue('password', e.target.value)}            />          )}        </Form>      <Footer />    </>  )}//  Используйте хукиfunction Component() {  const [values, setValue] = useForm()  return (    <>      <Header />        <input          value={values.name}          onChange={e => setValue('name', e.target.value)}        />        <input          value={values.password}          onChange={e => setValue('password', e.target.value)}        />      <Footer />    </>  )}

Библиотеки для получения данных

Библиотеки для управления состоянием

Ментальные модели компонентов

Контейнер и представитель

Компоненты с состоянием и без

Структура приложения

Группировка по маршруту/модулю

//  Не группируйте компоненты по деталям технической реализации containers|    Dashboard.jsx|    Details.jsx components|    Table.jsx|    Form.jsx|    Button.jsx|    Input.jsx|    Sidebar.jsx|    ItemCard.jsx//  Группируйте их по модулю/домену modules|    common|   |    components|   |   |    Button.jsx|   |   |    Input.jsx|    dashboard|   |    components|   |   |    Table.jsx|   |   |    Sidebar.jsx|    details|   |    components|   |   |    Form.jsx|   |   |    ItemCard.jsx

Общие модули

Абсолютные пути

//  Не используйте относительные путиimport Input from '../../../modules/common/components/Input'//  Абсолютный путь никогда не изменитсяimport Input from '@modules/common/components/Input'

Оборачивание внешних компонентов

//  Не импортируйте зависимости напрямуюimport { Button } from 'semantic-ui-react'import DatePicker from 'react-datepicker'//  Повторно экспортируйте их из внутреннего модуляimport { Button, DatePicker } from '@modules/common/components'

Один компонент одна директория

//  Не размещайте все файлы в одном месте components     Header.jsx     Header.scss     Header.test.jsx     Footer.jsx     Footer.scss     Footer.test.jsx//  Помещайте их в собственные директории components     Header         index.js         Header.jsx         Header.scss         Header.test.jsx     Footer         index.js         Footer.jsx         Footer.scss         Footer.test.jsx

Производительность

Преждевременная оптимизация

Размер сборки

Повторный рендеринг коллбеки, массивы и объекты

Тестирование

Тестирование при помощи снимков

Тестирование корректного рендеринга

Тестирование состояния и событий

Тестирование пограничных случаев

Интеграционное тестирование

Стилизация

CSS-в-JS

Стилизованные компоненты

Получение данных

Библиотеки для работы с данными

• Глобальные стили все стили содержатся в одном файле (например, index.css)
• Нативные CSS-модули для каждого компонента создается отдельный файл со стилями (например, в директории css); затем эти файлы импортируются в главный CSS-файл (тот же index.css) с помощью директивы "@import"
• Реактивные CSS-модули (данная техника используется не только в React-проектах; реактивными я назвал их потому, что библиотека css-modules в настоящее время интегрирована в React, т.е. не требует отдельной установки, по крайней мере, при использовании create-react-app) для каждого компонента создается файл Component.module.css, где Component название соответствующего компонента (обычно, такой файл размещается рядом с компонентом); затем стили импортируются в JS-файл в виде объекта, свойства которого соответствуют селекторам класса (например: import styles from './Button.module.css'; <button style={styles.button}>Нажми на меня</button>)
• Встроенные (инлайновые) стили элементы стилизуются с помощью атрибутов style со значениями в виде объектов со стилями (например, <button style={{ borderRadius: '6px'; } }>Нажми на меня</button>)
• CSS-в-JS библиотеки, позволяющие писать CSS в JS-файлах; одной из таких библиотек является styled-components: import styled from 'styled-components'; const Button = styled`какой-то css`; <Button>Нажми на меня</Button>

|--public  |--index.html|--src  |--components    |--Control      |--Control.js      |--Control.module.css      |--package.json      |--styles.js    |--Counter      |--Counter.js      |--Control.module.css      |--package.json      |--styles.js    |--Title      |--Title.js      |--Title.module.css      |--package.json    |--index.js  |--css    |--control.css    |--counter.css    |--title.css  |--App.js  |--global.css  |--index.js  |--nativeModules.css  |--reactModules.css...

• index.js входная точка JavaScript (в терминологии бандлеров), где импортируются глобальные стили и рендерится компонент App
• App.js основной компонент, где импортируются и объединяются компоненты Control, Counter и Title
• global.css глобальные стили, т.е. стили всех компонентов в одном файле
• nativeModules.css файл, где импортируются и объединяются нативные CSS-модули из директории css (control.css, counter.css и title.css)
• reactModules.css глобальные стили для реактивных CSS-модулей
• components/Control/Control.js три реализации компонента Control (с глобальными стилями/нативными CSS-модулями, c реактивными CSS-модулями и стилизованными компонентами), а также пример объекта со встроенными стилями
• components/Control/Control.module.css реактивный CSS-модуль для компонента Control
• components/Control/styles.js стилизованные компоненты для компонента Control (когда стилизованных компонентов много, я предпочитаю выносить их в отдельный файл)
• components/Control/package.json файл с main: "./Control", облегчающий импорт компонента (вместо import Control from './Control/Control' можно использовать import Control from './Control'
• components/index.js повторный экспорт, позволяющий разом импортировать все компоненты в App.js

yarn create react-app state-management# илиnpm init react-app state-management# илиnpx create-react-app state-management

yarn add bootstrap react-bootstrap nanoid# илиnpm i bootstrap react-bootstrap nanoid

• bootstrap, react-bootstrap стили
• nanoid утилита для генерации уникального ID

useState()

const [state, setState] = useState(initialValue)

• state текущее значение состояния
• setState сеттер
• initialValue начальное или дефолтное значение

|--use-state  |--components    |--index.js    |--TodoForm.js    |--TodoList.js    |--TodoListItem.js  |--App.js

// хукimport { useState } from 'react'// компонентыimport { TodoForm, TodoList } from './components'// стилиimport { Container } from 'react-bootstrap'// начальное состояние// изучите его как следует, чтобы понимать логику обновленияconst initialState = {  todos: {    ids: ['1', '2', '3', '4'],    entities: {      1: {        id: '1',        text: 'Eat',        completed: true      },      2: {        id: '2',        text: 'Code',        completed: true      },      3: {        id: '3',        text: 'Sleep',        completed: false      },      4: {        id: '4',        text: 'Repeat',        completed: false      }    }  }}export default function App() {  const [state, setState] = useState(initialState)  const { length } = state.todos.ids  return (    <Container style={{ maxWidth: '480px' }} className='text-center'>      <h1 className='mt-2'>useState</h1>      <TodoForm setState={setState} />      {length ? <TodoList state={state} setState={setState} /> : null}    </Container>  )}

// хукimport { useState } from 'react'// утилита для генерации IDimport { nanoid } from 'nanoid'// стилиimport { Container, Form, Button } from 'react-bootstrap'// функция принимает сеттерexport const TodoForm = ({ setState }) => {  const [text, setText] = useState('')  const updateText = ({ target: { value } }) => {    setText(value)  }  const addTodo = (e) => {    e.preventDefault()    const trimmed = text.trim()    if (trimmed) {      const id = nanoid(5)      const newTodo = { id, text, completed: false }      // обратите внимание, как нам приходится обновлять состояние      setState((state) => ({        ...state,        todos: {          ...state.todos,          ids: state.todos.ids.concat(id),          entities: {            ...state.todos.entities,            [id]: newTodo          }        }      }))      setText('')    }  }  return (    <Container className='mt-4'>      <h4>Form</h4>      <Form className='d-flex' onSubmit={addTodo}>        <Form.Control          type='text'          placeholder='Enter text...'          value={text}          onChange={updateText}        />        <Button variant='primary' type='submit'>          Add        </Button>      </Form>    </Container>  )}

// компонентimport { TodoListItem } from './TodoListItem'// стилиimport { Container, ListGroup } from 'react-bootstrap'// функция принимает состояние и сеттер только для того,// чтобы передать их потомкам// обратите внимание, как мы передаем отдельную задачуexport const TodoList = ({ state, setState }) => (  <Container className='mt-2'>    <h4>List</h4>    <ListGroup>      {state.todos.ids.map((id) => (        <TodoListItem          key={id}          todo={state.todos.entities[id]}          setState={setState}        />      ))}    </ListGroup>  </Container>)

// стилиimport { ListGroup, Form, Button } from 'react-bootstrap'// функция принимает задачу и сеттерexport const TodoListItem = ({ todo, setState }) => {  const { id, text, completed } = todo  // переключение задачи  const toggleTodo = () => {    setState((state) => {      // небольшая оптимизация      const { todos } = state      return {        ...state,        todos: {          ...todos,          entities: {            ...todos.entities,            [id]: {              ...todos.entities[id],              completed: !todos.entities[id].completed            }          }        }      }    })  }  // обновление задачи  const updateTodo = ({ target: { value } }) => {    const trimmed = value.trim()    if (trimmed) {      setState((state) => {        const { todos } = state        return {          ...state,          todos: {            ...todos,            entities: {              ...todos.entities,              [id]: {                ...todos.entities[id],                text: trimmed              }            }          }        }      })    }  }  // удаление задачи  const deleteTodo = () => {    setState((state) => {      const { todos } = state      const newIds = todos.ids.filter((_id) => _id !== id)      const newTodos = newIds.reduce((obj, id) => {        if (todos.entities[id]) return { ...obj, [id]: todos.entities[id] }        else return obj      }, {})      return {        ...state,        todos: {          ...todos,          ids: newIds,          entities: newTodos        }      }    })  }  // небольшой финт для упрощения обновления задачи  const inputStyles = {    outline: 'none',    border: 'none',    background: 'none',    textAlign: 'center',    textDecoration: completed ? 'line-through' : '',    opacity: completed ? '0.8' : '1'  }  return (    <ListGroup.Item className='d-flex align-items-baseline'>      <Form.Check        type='checkbox'        checked={completed}        onChange={toggleTodo}      />      <Form.Control        style={inputStyles}        defaultValue={text}        onChange={updateTodo}        disabled={completed}      />      <Button variant='danger' onClick={deleteTodo}>        Delete      </Button>    </ListGroup.Item>  )}

export { TodoForm } from './TodoForm'export { TodoList } from './TodoList'

import React from 'react'import { render } from 'react-dom'// стилиimport 'bootstrap/dist/css/bootstrap.min.css'// компонентimport App from './use-state/App'const root$ = document.getElementById('root')render(<App />, root$)

• Необходимость передачи состояния и/или сеттера на каждом уровне вложенности, обусловленная локальным характером состояния
• Логика обновления состояния приложения разбросана по компонентам и смешана с логикой самих компонентов
• Сложность обновления состояния, вытекающая из его иммутабельности
• Однонаправленный поток данных, невозможность свободного обмена данными между компонентами, находящимися на одном уровне вложенности, но в разных поддеревьях виртуального DOM
  

useContext() + useReducer()

const TodoContext = createContext()

<TodoContext.Provider value={state}>  <App /></TodoContext.Provider>

const state = useContext(TodoContext)

const [state, dispatch] = useReducer(todoReducer, initialState)

|--use-reducer  |--modules    |--components      |--index.js      |--TodoForm.js      |--TodoList.js      |--TodoListItem.js    |--todoReducer      |--actions.js      |--actionTypes.js      |--todoReducer.js    |--todoContext.js  |--App.js

const ADD_TODO = 'ADD_TODO'const TOGGLE_TODO = 'TOGGLE_TODO'const UPDATE_TODO = 'UPDATE_TODO'const DELETE_TODO = 'DELETE_TODO'export { ADD_TODO, TOGGLE_TODO, UPDATE_TODO, DELETE_TODO }

import { ADD_TODO, TOGGLE_TODO, UPDATE_TODO, DELETE_TODO } from './actionTypes'const createAction = (type, payload) => ({ type, payload })const addTodo = (newTodo) => createAction(ADD_TODO, newTodo)const toggleTodo = (todoId) => createAction(TOGGLE_TODO, todoId)const updateTodo = (payload) => createAction(UPDATE_TODO, payload)const deleteTodo = (todoId) => createAction(DELETE_TODO, todoId)export { addTodo, toggleTodo, updateTodo, deleteTodo }

// утилита для генерации IDimport { nanoid } from 'nanoid'// типы операцийimport * as actions from './actionTypes'export const todoReducer = (state, action) => {  const { todos } = state  switch (action.type) {    case actions.ADD_TODO: {      const { payload: newTodo } = action      const id = nanoid(5)      return {        ...state,        todos: {          ...todos,          ids: todos.ids.concat(id),          entities: {            ...todos.entities,            [id]: { id, ...newTodo }          }        }      }    }    case actions.TOGGLE_TODO: {      const { payload: id } = action      return {        ...state,        todos: {          ...todos,          entities: {            ...todos.entities,            [id]: {              ...todos.entities[id],              completed: !todos.entities[id].completed            }          }        }      }    }    case actions.UPDATE_TODO: {      const { payload: id, text } = action      return {        ...state,        todos: {          ...todos,          entities: {            ...todos.entities,            [id]: {              ...todos.entities[id],              text            }          }        }      }    }    case actions.DELETE_TODO: {      const { payload: id } = action      const newIds = todos.ids.filter((_id) => _id !== id)      const newTodos = newIds.reduce((obj, id) => {        if (todos.entities[id]) return { ...obj, [id]: todos.entities[id] }        else return obj      }, {})      return {        ...state,        todos: {          ...todos,          ids: newIds,          entities: newTodos        }      }    }    // по умолчанию (при отсутствии совпадения со всеми case) редуктор возвращает состояние в неизменном виде    default:      return state  }}

// reactimport { createContext, useReducer, useContext } from 'react'// редукторimport { todoReducer } from './todoReducer/todoReducer'// создаем контекстconst TodoContext = createContext()// начальное состояниеconst initialState = {  todos: {    ids: ['1', '2', '3', '4'],    entities: {      1: {        id: '1',        text: 'Eat',        completed: true      },      2: {        id: '2',        text: 'Code',        completed: true      },      3: {        id: '3',        text: 'Sleep',        completed: false      },      4: {        id: '4',        text: 'Repeat',        completed: false      }    }  }}// провайдерexport const TodoProvider = ({ children }) => {  const [state, dispatch] = useReducer(todoReducer, initialState)  return (    <TodoContext.Provider value={{ state, dispatch }}>      {children}    </TodoContext.Provider>  )}// утилита для извлечения значений из контекстаexport const useTodoContext = () => useContext(TodoContext)

// React, ReactDOM и стилиimport { TodoProvider } from './use-reducer/modules/TodoContext'import App from './use-reducer/App'const root$ = document.getElementById('root')render(  <TodoProvider>    <App />  </TodoProvider>,  root$)

import { useTodoContext } from '../TodoContext'// в компонентеconst { state, dispatch } = useTodoContext()

import * as actions from '../todoReducer/actions'// в компонентеdispatch(actions.addTodo(newTodo))

// componentsimport { TodoForm, TodoList } from './modules/components'// stylesimport { Container } from 'react-bootstrap'// contextimport { useTodoContext } from './modules/TodoContext'export default function App() {  const { state } = useTodoContext()  const { length } = state.todos.ids  return (    <Container style={{ maxWidth: '480px' }} className='text-center'>      <h1 className='mt-2'>useReducer</h1>      <TodoForm />      {length ? <TodoList /> : null}    </Container>  )}

// reactimport { useState } from 'react'// stylesimport { Container, Form, Button } from 'react-bootstrap'// contextimport { useTodoContext } from '../TodoContext'// actionsimport * as actions from '../todoReducer/actions'export const TodoForm = () => {  const { dispatch } = useTodoContext()  const [text, setText] = useState('')  const updateText = ({ target: { value } }) => {    setText(value)  }  const handleAddTodo = (e) => {    e.preventDefault()    const trimmed = text.trim()    if (trimmed) {      const newTodo = { text, completed: false }      dispatch(actions.addTodo(newTodo))      setText('')    }  }  return (    <Container className='mt-4'>      <h4>Form</h4>      <Form className='d-flex' onSubmit={handleAddTodo}>        <Form.Control          type='text'          placeholder='Enter text...'          value={text}          onChange={updateText}        />        <Button variant='primary' type='submit'>          Add        </Button>      </Form>    </Container>  )}

// componentsimport { TodoListItem } from './TodoListItem'// stylesimport { Container, ListGroup } from 'react-bootstrap'// contextimport { useTodoContext } from '../TodoContext'export const TodoList = () => {  const {    state: { todos }  } = useTodoContext()  return (    <Container className='mt-2'>      <h4>List</h4>      <ListGroup>        {todos.ids.map((id) => (          <TodoListItem key={id} todo={todos.entities[id]} />        ))}      </ListGroup>    </Container>  )}

// stylesimport { ListGroup, Form, Button } from 'react-bootstrap'// contextimport { useTodoContext } from '../TodoContext'// actionsimport * as actions from '../todoReducer/actions'export const TodoListItem = ({ todo }) => {  const { dispatch } = useTodoContext()  const { id, text, completed } = todo  const handleUpdateTodo = ({ target: { value } }) => {    const trimmed = value.trim()    if (trimmed) {      dispatch(actions.updateTodo({ id, trimmed }))    }  }  const inputStyles = {    outline: 'none',    border: 'none',    background: 'none',    textAlign: 'center',    textDecoration: completed ? 'line-through' : '',    opacity: completed ? '0.8' : '1'  }  return (    <ListGroup.Item className='d-flex align-items-baseline'>      <Form.Check        type='checkbox'        checked={completed}        onChange={() => dispatch(actions.toggleTodo(id))}      />      <Form.Control        style={inputStyles}        defaultValue={text}        onChange={handleUpdateTodo}        disabled={completed}      />      <Button variant='danger' onClick={() => dispatch(actions.deleteTodo(id))}>        Delete      </Button>    </ListGroup.Item>  )}

// утилита, предоставляемая immerimport produce from 'immer'import { nanoid } from 'nanoid'// типы операцийimport * as actions from './actionTypes'// сравните с "классической" реализацией редуктора// для обновления состояния используется draft - черновик исходного состоянияexport const todoProducer = produce((draft, action) => {  const {    todos: { ids, entities }  } = draft  switch (action.type) {    case actions.ADD_TODO: {      const { payload: newTodo } = action      const id = nanoid(5)      ids.push(id)      entities[id] = { id, ...newTodo }      break    }    case actions.TOGGLE_TODO: {      const { payload: id } = action      entities[id].completed = !entities[id].completed      break    }    case actions.UPDATE_TODO: {      const { payload: id, text } = action      entities[id].text = text      break    }    case actions.DELETE_TODO: {      const { payload: id } = action      ids.splice(ids.indexOf(id), 1)      delete entities[id]      break    }    default:      return draft  }})

// import { todoReducer } from './todoReducer/todoReducer'import { todoProducer } from './todoReducer/todoProducer'// в провайдере// const [state, dispatch] = useReducer(todoReducer, initialState)const [state, dispatch] = useReducer(todoProducer, initialState)

Redux Toolkit

• Состояние всего приложения находится в одном хранилище (store)
• Дочерние компоненты оборачиваются в Provider из react-redux, которому в виде пропа store передается хранилище
• Редукторы (reducers) каждой части состояния объединяются с помощью combineReducers() в один корневой редуктор (root reducer), который передается при создании хранилища в createStore()
• Компоненты подключаются к хранилищу с помощью connect() (+ mapStateToProps(), mapDispatchToProps()) и т.д.

• configureStore() для создания и настройки хранилища
• createSlice() для создания частей состояния
• createEntityAdapter() для создания адаптера сущностей

• createSelector() для создания селекторов
• createAsyncThunk() для создания преобразователей (thunk)

yarn add @reduxjs/toolkit# илиnpm i @reduxjs/toolkit

|--redux-toolkit  |--modules    |--components      |--index.js      |--TodoForm.js      |--TodoList.js      |--TodoListItem.js  |--slices    |--todosSlice.js  |--App.js  |--store.js

// утилита для создания хранилищаimport { configureStore } from '@reduxjs/toolkit'// редукторimport todosReducer from './modules/slices/todosSlice'// начальное состояниеconst preloadedState = {  todos: {    ids: ['1', '2', '3', '4'],    entities: {      1: {        id: '1',        text: 'Eat',        completed: true      },      2: {        id: '2',        text: 'Code',        completed: true      },      3: {        id: '3',        text: 'Sleep',        completed: false      },      4: {        id: '4',        text: 'Repeat',        completed: false      }    }  }}// хранилищеconst store = configureStore({  reducer: {    todos: todosReducer  },  preloadedState})export default store

// React, ReactDOM & стили// провайдерimport { Provider } from 'react-redux'// основной компонентimport App from './redux-toolkit/App'// хранилищеimport store from './redux-toolkit/store'const root$ = document.getElementById('root')render(  <Provider store={store}>    <App />  </Provider>,  root$)

// утилиты для создания части состояния и адаптера сущностейimport {  createSlice,  createEntityAdapter} from '@reduxjs/toolkit'// создаем адаптерconst todosAdapter = createEntityAdapter()// инициализируем начальное состояние// получаем { ids: [], entities: {} }const initialState = todosAdapter.getInitialState()// создаем часть состоянияconst todosSlice = createSlice({  // уникальный ключ, используемый в качестве префикса при генерации создателей операции  name: 'todos',  // начальное состояние  initialState,  // редукторы  reducers: {    // данный создатель операции отправляет в редуктор операцию { type: 'todos/addTodo', payload: newTodo }    addTodo: todosAdapter.addOne,    // Redux Toolkit использует immer для обновления состояния    toggleTodo(state, action) {      const { payload: id } = action      const todo = state.entities[id]      todo.completed = !todo.completed    },    updateTodo(state, action) {      const { id, text } = action.payload      const todo = state.entities[id]      todo.text = text    },    deleteTodo: todosAdapter.removeOne  }})// экспортируем селектор для получения всех entities в виде массиваexport const { selectAll: selectAllTodos } = todosAdapter.getSelectors(  (state) => state.todos)// экспортируем создателей операцииexport const {  addTodo,  toggleTodo,  updateTodo,  deleteTodo} = todosSlice.actions// эскпортируем редукторexport default todosSlice.reducer

import { useDispatch } from 'react-redux'import { addTodo } from '../slices/todosSlice'// в компонентеconst dispatch = useDispatch()dispatch(addTodo(newTodo))

yarn add json-server concurrently# илиnpm i json-server concurrently

"server": "concurrently \"json-server -w db.json -p 5000 -d 1000\" \"yarn start\""

• -w означает наблюдение за изменениями файла db.json
• -p означает порт, по умолчанию запросы из приложения отправляются на порт 3000
• -d задержка ответа от сервера

{  "todos": [    {      "id": "1",      "text": "Eat",      "completed": true,      "visible": true    },    {      "id": "2",      "text": "Code",      "completed": true,      "visible": true    },    {      "id": "3",      "text": "Sleep",      "completed": false,      "visible": true    },    {      "id": "4",      "text": "Repeat",      "completed": false,      "visible": true    }  ]}

"proxy": "http://localhost:5000"

import { createSlice } from '@reduxjs/toolkit'// фильтрыexport const Filters = {  All: 'all',  Active: 'active',  Completed: 'completed'}// начальное состояние - отображать все задачиconst initialState = {  status: Filters.All}// состояние фильтраconst filterSlice = createSlice({  name: 'filter',  initialState,  reducers: {    setFilter(state, action) {      state.status = action.payload    }  }})export const { setFilter } = filterSlice.actionsexport default filterSlice.reducer

// нам больше не требуется preloadedStateimport { configureStore } from '@reduxjs/toolkit'import todosReducer from './modules/slices/todosSlice'import filterReducer from './modules/slices/filterSlice'const store = configureStore({  reducer: {    todos: todosReducer,    filter: filterReducer  }})export default store

import {  createSlice,  createEntityAdapter,  // утилита для создания селекторов  createSelector,  // утилита для создания преобразователей  createAsyncThunk} from '@reduxjs/toolkit'// утилита для выполнения HTTP-запросовimport axios from 'axios'// фильтрыimport { Filters } from './filterSlice'const todosAdapter = createEntityAdapter()const initialState = todosAdapter.getInitialState({  // добавляем в начальное состояние статус загрузки  status: 'idle'})// адрес сервераconst SERVER_URL = 'http://localhost:5000/todos'// преобразовательexport const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {  try {    const response = await axios(SERVER_URL)    return response.data  } catch (err) {    console.error(err.toJSON())  }})const todosSlice = createSlice({  name: 'todos',  initialState,  reducers: {    addTodo: todosAdapter.addOne,    toggleTodo(state, action) {      const { payload: id } = action      const todo = state.entities[id]      todo.completed = !todo.completed    },    updateTodo(state, action) {      const { id, text } = action.payload      const todo = state.entities[id]      todo.text = text    },    deleteTodo: todosAdapter.removeOne,    // создатель операции для выполнения всех задач    completeAllTodos(state) {      Object.values(state.entities).forEach((todo) => {        todo.completed = true      })    },    // создатель операции для очистки выполненных задач    clearCompletedTodos(state) {      const completedIds = Object.values(state.entities)        .filter((todo) => todo.completed)        .map((todo) => todo.id)      todosAdapter.removeMany(state, completedIds)    }  },  // дополнительные редукторы  extraReducers: (builder) => {    builder      // после начала выполнения запроса на получения задач      // меняем значение статуса на loading      // это позволит отображать индикатор загрузки в App.js      .addCase(fetchTodos.pending, (state) => {        state.status = 'loading'      })      // после получения задач от сервера      // записываем их в состояние      // и меняем статус загрузки      .addCase(fetchTodos.fulfilled, (state, action) => {        todosAdapter.setAll(state, action.payload)        state.status = 'idle'      })  }})export const { selectAll: selectAllTodos } = todosAdapter.getSelectors(  (state) => state.todos)// создаем и экспортируем кастомный селектор для получения отфильтрованных задачexport const selectFilteredTodos = createSelector(  selectAllTodos,  (state) => state.filter,  (todos, filter) => {    const { status } = filter    if (status === Filters.All) return todos    return status === Filters.Active      ? todos.filter((todo) => !todo.completed)      : todos.filter((todo) => todo.completed)  })export const {  addTodo,  toggleTodo,  updateTodo,  deleteTodo,  completeAllTodos,  clearCompletedTodos} = todosSlice.actionsexport default todosSlice.reducer

// после импорта компонента "App"import { fetchTodos } from './redux-toolkit/modules/slices/todosSlice'store.dispatch(fetchTodos())

// хук для доступа к селекторамimport { useSelector } from 'react-redux'// индикатор загрузки - спиннерimport Loader from 'react-loader-spinner'// компонентыimport {  TodoForm,  TodoList,  TodoFilters,  TodoControls,  TodoStats} from './modules/components'// стилиimport { Container } from 'react-bootstrap'// селектор для получения всех entitites в виде массиваimport { selectAllTodos } from './modules/slices/todosSlice'export default function App() {  // получаем длину массива сущностей  const { length } = useSelector(selectAllTodos)  // получаем значение статуса  const loadingStatus = useSelector((state) => state.todos.status)  // стили для индикатора загрузки  const loaderStyles = {    position: 'absolute',    top: '50%',    left: '50%',    transform: 'translate(-50%, -50%)'  }  if (loadingStatus === 'loading')    return (      <Loader        type='Oval'        color='#00bfff'        height={80}        width={80}        style={loaderStyles}      />    )  return (    <Container style={{ maxWidth: '480px' }} className='text-center'>      <h1 className='mt-2'>Redux Toolkit</h1>      <TodoForm />      {length ? (        <>          <TodoStats />          <TodoFilters />          <TodoList />          <TodoControls />        </>      ) : null}    </Container>  )}

// reduximport { useDispatch } from 'react-redux'// stylesimport { Container, ButtonGroup, Button } from 'react-bootstrap'// action creatorsimport { completeAllTodos, clearCompletedTodos } from '../slices/todosSlice'export const TodoControls = () => {  const dispatch = useDispatch()  return (    <Container className='mt-2'>      <h4>Controls</h4>      <ButtonGroup>        <Button          variant='outline-secondary'          onClick={() => dispatch(completeAllTodos())}        >          Complete all        </Button>        <Button          variant='outline-secondary'          onClick={() => dispatch(clearCompletedTodos())}        >          Clear completed        </Button>      </ButtonGroup>    </Container>  )}

// reduximport { useDispatch, useSelector } from 'react-redux'// stylesimport { Container, Form } from 'react-bootstrap'// filters & action creatorimport { Filters, setFilter } from '../slices/filterSlice'export const TodoFilters = () => {  const dispatch = useDispatch()  const { status } = useSelector((state) => state.filter)  const changeFilter = (filter) => {    dispatch(setFilter(filter))  }  return (    <Container className='mt-2'>      <h4>Filters</h4>      {Object.keys(Filters).map((key) => {        const value = Filters[key]        const checked = value === status        return (          <Form.Check            key={value}            inline            label={value.toUpperCase()}            type='radio'            name='filter'            onChange={() => changeFilter(value)}            checked={checked}          />        )      })}    </Container>  )}

// reactimport { useState } from 'react'// reduximport { useDispatch } from 'react-redux'// libsimport { nanoid } from 'nanoid'// stylesimport { Container, Form, Button } from 'react-bootstrap'// action creatorimport { addTodo } from '../slices/todosSlice'export const TodoForm = () => {  const dispatch = useDispatch()  const [text, setText] = useState('')  const updateText = ({ target: { value } }) => {    setText(value)  }  const handleAddTodo = (e) => {    e.preventDefault()    const trimmed = text.trim()    if (trimmed) {      const newTodo = { id: nanoid(5), text, completed: false }      dispatch(addTodo(newTodo))      setText('')    }  }  return (    <Container className='mt-4'>      <h4>Form</h4>      <Form className='d-flex' onSubmit={handleAddTodo}>        <Form.Control          type='text'          placeholder='Enter text...'          value={text}          onChange={updateText}        />        <Button variant='primary' type='submit'>          Add        </Button>      </Form>    </Container>  )}

// reduximport { useSelector } from 'react-redux'// componentimport { TodoListItem } from './TodoListItem'// stylesimport { Container, ListGroup } from 'react-bootstrap'// selectorimport { selectFilteredTodos } from '../slices/todosSlice'export const TodoList = () => {  const filteredTodos = useSelector(selectFilteredTodos)  return (    <Container className='mt-2'>      <h4>List</h4>      <ListGroup>        {filteredTodos.map((todo) => (          <TodoListItem key={todo.id} todo={todo} />        ))}      </ListGroup>    </Container>  )}

// reduximport { useDispatch } from 'react-redux'// stylesimport { ListGroup, Form, Button } from 'react-bootstrap'// action creatorsimport { toggleTodo, updateTodo, deleteTodo } from '../slices/todosSlice'export const TodoListItem = ({ todo }) => {  const dispatch = useDispatch()  const { id, text, completed } = todo  const handleUpdateTodo = ({ target: { value } }) => {    const trimmed = value.trim()    if (trimmed) {      dispatch(updateTodo({ id, trimmed }))    }  }  const inputStyles = {    outline: 'none',    border: 'none',    background: 'none',    textAlign: 'center',    textDecoration: completed ? 'line-through' : '',    opacity: completed ? '0.8' : '1'  }  return (    <ListGroup.Item className='d-flex align-items-baseline'>      <Form.Check        type='checkbox'        checked={completed}        onChange={() => dispatch(toggleTodo(id))}      />      <Form.Control        style={inputStyles}        defaultValue={text}        onChange={handleUpdateTodo}        disabled={completed}      />      <Button variant='danger' onClick={() => dispatch(deleteTodo(id))}>        Delete      </Button>    </ListGroup.Item>  )}

// reactimport { useState, useEffect } from 'react'// reduximport { useSelector } from 'react-redux'// stylesimport { Container, ListGroup } from 'react-bootstrap'// selectorimport { selectAllTodos } from '../slices/todosSlice'export const TodoStats = () => {  const allTodos = useSelector(selectAllTodos)  const [stats, setStats] = useState({    total: 0,    active: 0,    completed: 0,    percent: 0  })  useEffect(() => {    if (allTodos.length) {      const total = allTodos.length      const completed = allTodos.filter((todo) => todo.completed).length      const active = total - completed      const percent = total === 0 ? 0 : Math.round((active / total) * 100) + '%'      setStats({        total,        active,        completed,        percent      })    }  }, [allTodos])  return (    <Container className='mt-2'>      <h4>Stats</h4>      <ListGroup horizontal>        {Object.entries(stats).map(([[first, ...rest], count], index) => (          <ListGroup.Item key={index}>            {first.toUpperCase() + rest.join('')}: {count}          </ListGroup.Item>        ))}      </ListGroup>    </Container>  )}

Recoil

yarn add recoil# илиnpm i recoil

|--recoil  |--modules    |--atoms      |--filterAtom.js      |--todosAtom.js    |--components      |--index.js      |--TodoControls.js      |--TodoFilters.js      |--TodoForm.js      |--TodoList.js      |--TodoListItem.js      |--TodoStats.js  |--App.js

// todosAtom.js// утилиты для создания атомов и селекторовimport { atom, selector } from 'recoil'// утилита для выполнения HTTP-запросовimport axios from 'axios'// адрес сервераconst SERVER_URL = 'http://localhost:5000/todos'// атом с состоянием для списка задачexport const todosState = atom({  key: 'todosState',  default: selector({    key: 'todosState/default',    get: async () => {      try {        const response = await axios(SERVER_URL)        return response.data      } catch (err) {        console.log(err.toJSON())      }    }  })})

import React, { Component, Suspense } from 'react'import { render } from 'react-dom'// recoilimport { RecoilRoot } from 'recoil'// индикатор загрузкиimport Loader from 'react-loader-spinner'import App from './recoil/App'// предохранитель с официального сайта Reactclass ErrorBoundary extends Component {  constructor(props) {    super(props)    this.state = { error: null, errorInfo: null }  }  componentDidCatch(error, errorInfo) {    this.setState({      error: error,      errorInfo: errorInfo    })  }  render() {    if (this.state.errorInfo) {      return (        <div>          <h2>Something went wrong.</h2>          <details style={{ whiteSpace: 'pre-wrap' }}>            {this.state.error && this.state.error.toString()}            <br />            {this.state.errorInfo.componentStack}          </details>        </div>      )    }    return this.props.children  }}const loaderStyles = {  position: 'absolute',  top: '50%',  left: '50%',  transform: 'translate(-50%, -50%)'}const root$ = document.getElementById('root')// мы оборачиваем основной компонент приложения сначала в Suspense, затем в ErrorBoundaryrender(  <RecoilRoot>    <Suspense      fallback={        <Loader          type='Oval'          color='#00bfff'          height={80}          width={80}          style={loaderStyles}        />      }    >      <ErrorBoundary>        <App />      </ErrorBoundary>    </Suspense>  </RecoilRoot>,  root$)

// filterAtom.js// recoilimport { atom, selector } from 'recoil'// атомimport { todosState } from './todosAtom'export const Filters = {  All: 'all',  Active: 'active',  Completed: 'completed'}export const todoListFilterState = atom({  key: 'todoListFilterState',  default: Filters.All})// данный селектор использует два атома: атом фильтра и атом списка задачexport const filteredTodosState = selector({  key: 'filteredTodosState',  get: ({ get }) => {    const filter = get(todoListFilterState)    const todos = get(todosState)    if (filter === Filters.All) return todos    return filter === Filters.Completed      ? todos.filter((todo) => todo.completed)      : todos.filter((todo) => !todo.completed)  }})

// хукimport { useRecoilState } from 'recoil'// стилиimport { ListGroup, Form, Button } from 'react-bootstrap'// атомimport { todosState } from '../atoms/todosAtom'export const TodoListItem = ({ todo }) => {  // данный хук - это как useState() для состояния Recoil  const [todos, setTodos] = useRecoilState(todosState)  const { id, text, completed } = todo  const toggleTodo = () => {    const newTodos = todos.map((todo) =>      todo.id === id ? { ...todo, completed: !todo.completed } : todo    )    setTodos(newTodos)  }  const updateTodo = ({ target: { value } }) => {    const trimmed = value.trim()    if (!trimmed) return    const newTodos = todos.map((todo) =>      todo.id === id ? { ...todo, text: value } : todo    )    setTodos(newTodos)  }  const deleteTodo = () => {    const newTodos = todos.filter((todo) => todo.id !== id)    setTodos(newTodos)  }  const inputStyles = {    outline: 'none',    border: 'none',    background: 'none',    textAlign: 'center',    textDecoration: completed ? 'line-through' : '',    opacity: completed ? '0.8' : '1'  }  return (    <ListGroup.Item className='d-flex align-items-baseline'>      <Form.Check type='checkbox' checked={completed} onChange={toggleTodo} />      <Form.Control        style={inputStyles}        defaultValue={text}        onChange={updateTodo}        disabled={completed}      />      <Button variant='danger' onClick={deleteTodo}>        Delete      </Button>    </ListGroup.Item>  )}

// recoilimport { useRecoilState } from 'recoil'// stylesimport { Container, ButtonGroup, Button } from 'react-bootstrap'// atomimport { todosState } from '../atoms/todosAtom'export const TodoControls = () => {  const [todos, setTodos] = useRecoilState(todosState)  const completeAllTodos = () => {    const newTodos = todos.map((todo) => (todo.completed = true))    setTodos(newTodos)  }  const clearCompletedTodos = () => {    const newTodos = todos.filter((todo) => !todo.completed)    setTodos(newTodos)  }  return (    <Container className='mt-2'>      <h4>Controls</h4>      <ButtonGroup>        <Button variant='outline-secondary' onClick={completeAllTodos}>          Complete all        </Button>        <Button variant='outline-secondary' onClick={clearCompletedTodos}>          Clear completed        </Button>      </ButtonGroup>    </Container>  )}

// recoilimport { useRecoilState } from 'recoil'// stylesimport { Container, Form } from 'react-bootstrap'// filters & atomimport { Filters, todoListFilterState } from '../atoms/filterAtom'export const TodoFilters = () => {  const [filter, setFilter] = useRecoilState(todoListFilterState)  return (    <Container className='mt-2'>      <h4>Filters</h4>      {Object.keys(Filters).map((key) => {        const value = Filters[key]        const checked = value === filter        return (          <Form.Check            key={value}            inline            label={value.toUpperCase()}            type='radio'            name='filter'            onChange={() => setFilter(value)}            checked={checked}          />        )      })}    </Container>  )}

// reactimport { useState } from 'react'// recoilimport { useSetRecoilState } from 'recoil'// libsimport { nanoid } from 'nanoid'// stylesimport { Container, Form, Button } from 'react-bootstrap'// atomimport { todosState } from '../atoms/todosAtom'export const TodoForm = () => {  const [text, setText] = useState('')  const setTodos = useSetRecoilState(todosState)  const updateText = ({ target: { value } }) => {    setText(value)  }  const addTodo = (e) => {    e.preventDefault()    const trimmed = text.trim()    if (trimmed) {      const newTodo = { id: nanoid(5), text, completed: false }      setTodos((oldTodos) => oldTodos.concat(newTodo))      setText('')    }  }  return (    <Container className='mt-4'>      <h4>Form</h4>      <Form className='d-flex' onSubmit={addTodo}>        <Form.Control          type='text'          placeholder='Enter text...'          value={text}          onChange={updateText}        />        <Button variant='primary' type='submit'>          Add        </Button>      </Form>    </Container>  )}

// recoilimport { useRecoilValue } from 'recoil'// componentsimport { TodoListItem } from './TodoListItem'// stylesimport { Container, ListGroup } from 'react-bootstrap'// atomimport { filteredTodosState } from '../atoms/filterAtom'export const TodoList = () => {  const filteredTodos = useRecoilValue(filteredTodosState)  return (    <Container className='mt-2'>      <h4>List</h4>      <ListGroup>        {filteredTodos.map((todo) => (          <TodoListItem key={todo.id} todo={todo} />        ))}      </ListGroup>    </Container>  )}

// reactimport { useState, useEffect } from 'react'// recoilimport { useRecoilValue } from 'recoil'// stylesimport { Container, ListGroup } from 'react-bootstrap'// atomimport { todosState } from '../atoms/todosAtom'export const TodoStats = () => {  const todos = useRecoilValue(todosState)  const [stats, setStats] = useState({    total: 0,    active: 0,    completed: 0,    percent: 0  })  useEffect(() => {    if (todos.length) {      const total = todos.length      const completed = todos.filter((todo) => todo.completed).length      const active = total - completed      const percent = total === 0 ? 0 : Math.round((active / total) * 100) + '%'      setStats({        total,        active,        completed,        percent      })    }  }, [todos])  return (    <Container className='mt-2'>      <h4>Stats</h4>      <ListGroup horizontal>        {Object.entries(stats).map(([[first, ...rest], count], index) => (          <ListGroup.Item key={index}>            {first.toUpperCase() + rest.join('')}: {count}          </ListGroup.Item>        ))}      </ListGroup>    </Container>  )}

Заключение

• Для управления локальным состоянием (состоянием одного-двух компонентов; при условии, что эти два компонента тесно связаны между собой) используйте useState()
• Для управления распределенным состоянием (состоянием двух и более автономных компонентов) или состоянием небольших и средних приложений используйте Recoil или сочетание useContext()/useReducer()
• Обратите внимание, что если вам нужно просто передавать значения в глубоко вложенные компоненты, то вам вполне хватит useContext() (useContext() сам по себе не является инструментом для управления состоянием)
• Наконец, для управления глобальным состоянием (состоянием всех или большинства компонентов) или состоянием сложного приложения используйте Redux Toolkit

Redux

Задача

npx create-react-app my-app --template typescriptcd my-appnpm start

npm i redux react-redux redux-mock-store @types/redux @types/react-redux @types/redux-mock-store  

Actions

// actions/actions.test.tsimport { checkboxClick } from '.'describe('checkboxClick', () => {  it('returns checkboxClick action with action name in payload', () => {    const checkboxName = 'anyCheckbox'    const result = checkboxClick(checkboxName)    expect(result).toEqual({ type: 'checkbox/click', payload: checkboxName })  })})

// actions/package.json{  "main": "./actions"}// actions/actions.tsexport const checkboxClick = (name: string) => ({ type: 'checkbox/click', payload: name })

// actionTypes.tsexport const CHECKBOX_CLICK = 'checkbox/click'

// actions/actions.test.tsimport { CHECKBOX_CLICK } from 'actionTypes'import { checkboxClick } from '.'describe('checkboxClick', () => {  it('returns checkboxClick action with action name in payload', () => {    const checkboxName = 'anyCheckbox'    const result = checkboxClick(checkboxName)    expect(result).toEqual({ type: CHECKBOX_CLICK, payload: checkboxName })  })})

// actions/actions.tsimport { CHECKBOX_CLICK } from 'actionTypes'export const checkboxClick = (name: string) => ({ type: CHECKBOX_CLICK, payload: name })

Reducers

{  checkboxName: true}

// reducers/reducers.test.tsimport { checkboxReducer } from '.'describe('checkboxReducer', () => {  it('creates default state', () => {    const state = checkboxReducer(undefined, { type: 'anyAction' })    expect(state).toEqual({})  })})

// reducers/package.json{  "main": "./reducers"}// reducers/reducers.tsconst initialState: Record<string, boolean> = {}export const checkboxReducer = (state = initialState, action: { type: string }) => {  return state}

// reducers/reducers.test.tsimport { CHECKBOX_CLICK } from 'actionTypes'import { checkboxReducer } from '.'describe('checkboxReducer', () => {  it('creates default state', () => {    const state = checkboxReducer(undefined, { type: 'anyAction' })    expect(state).toEqual({})  })  it('sets checked flag', () => {    const state = checkboxReducer(undefined, { type: CHECKBOX_CLICK, payload: 'anyName' })    expect(state.anyName).toBe(true)  })})

// reducers/reducers.tsimport { CHECKBOX_CLICK } from 'actionTypes'const initialState: Record<string, boolean> = {}export const checkboxReducer = (  state = initialState,  action: { type: string; payload?: string },) => {  if (action.type === CHECKBOX_CLICK && action.payload) {    return { ...state, [action.payload]: true }  }  return state}

// reducers/reducers.test.ts  it('sets checked flag to false when it was checked', () => {    const state = checkboxReducer({ anyName: true }, { type: CHECKBOX_CLICK, payload: 'anyName' })    expect(state.anyName).toBe(false)  })

// reducers/reducers.tsimport { CHECKBOX_CLICK } from 'actionTypes'const initialState: Record<string, boolean> = {}export const checkboxReducer = (  state = initialState,  action: { type: string; payload?: string },) => {  if (action.type === CHECKBOX_CLICK && action.payload) {    return { ...state, [action.payload]: !state[action.payload] }  }  return state}

Selectors

// selectors/selectors.test.tsimport { getCheckboxState } from './selectors'describe('getCheckboxState', () => {  const state = {    checkboxes: { anyName: true },  }  it('returns current checkbox state', () => {    const result = getCheckboxState('anyName')(state)    expect(result).toBe(true)  })})

// types.tsexport type State = {  checkboxes: Record<string, boolean>}

// selectors/package.json{  "main": "./selectors"}// selectors/selectors.tsimport { State } from 'types'export const getCheckboxState = (name: string) => (state: State) => state.checkboxes[name]

// selectors/selectors.test.ts  it('returns false when checkbox state is undefined', () => {    const result = getCheckboxState('anotherName')(state)    expect(result).toBe(false)  })

// selectors/selectors.tsimport { State } from 'types'export const getCheckboxState = (name: string) => (state: State) => state.checkboxes[name] ?? false

Store

// store.tsimport { AnyAction, createStore, combineReducers } from 'redux'import { State } from 'types'import { checkboxReducer } from 'reducers'export const createAppStore = (initialState?: State) =>  createStore<State, AnyAction, unknown, unknown>(    combineReducers({      checkboxes: checkboxReducer,    }),    initialState,  )export default createAppStore()

React Components

npm i react-test-renderer @types/react-test-renderer

Checkbox

// components/Checkbox/Checkbox.test.tsximport { create } from 'react-test-renderer'import Checkbox from '.'describe('Checkbox', () => {  it('renders checkbox input', () => {    const checkboxName = 'anyName'    const renderer = create(<Checkbox />)    const element = renderer.root.findByType('input')    expect(element.props.type).toBe('checkbox')  })})

// components/Checkbox/package.json{  "main": "Checkbox"}// components/Checkbox/Checkbox.tsximport React from 'react'const Checkbox: React.FC = () => {  return (    <div>      <input type="checkbox" />    </div>  )}export default Checkbox

// components/Checkbox/Checkbox.test.tsxit('renders label', () => {    const labelText = 'anyLabel'    const renderer = create(<Checkbox label={labelText} />)    const element = renderer.root.findByType('label')    expect(element.props.children).toBe(labelText)  })

// components/Checkbox/Checkbox.tsxconst Checkbox: React.FC<{ label: string }> = ({ label }) => {  return (    <div>      <input type="checkbox" />      <label>{label}</label>    </div>  )}

// components/Checkbox/Checkbox.test.tsx  it('sets name prop as input id', () => {    const checkboxName = 'anyCheckbox'    const renderer = create(<Checkbox name={checkboxName} label={'anyLabel'} />)    const element = renderer.root.findByType('input')    expect(element.props.id).toBe(checkboxName)  })

// components/Checkbox/Checkbox.tsxconst Checkbox: React.FC<{ name: string; label: string }> = ({ name, label }) => {  return (    <div>      <input id={name} type="checkbox" />      <label>{label}</label>    </div>  )}

// components/Checkbox/Checkbox.test.tsx  it('sets name prop as label htmlFor', () => {    const checkboxName = 'anyCheckbox'    const renderer = create(<Checkbox name={checkboxName} label={'anyLabel'} />)    const element = renderer.root.findByType('label')    expect(element.props.htmlFor).toBe(checkboxName)  })

// components/Checkbox/Checkbox.tsxconst Checkbox: React.FC<{ name: string; label: string }> = ({ name, label }) => {  return (    <div>      <input id={name} type="checkbox" />      <label htmlFor={name}>{label}</label>    </div>  )}

// components/Checkbox/Checkbox.test.tsximport { Provider } from 'react-redux'import { create } from 'react-test-renderer'import { createAppStore } from 'store'import Checkbox from '.'// omit old code  it('sets checked flag from store when it`s checked', () => {    const store = createAppStore({ checkboxes: { anyName: true } })    const renderer = create(      <Provider store={store}>        <Checkbox name="anyName" label="anyLabel" />      </Provider>,    )    const element = renderer.root.findByType('input')    expect(element.props.checked).toBe(true)  })

// components/Checkbox/Checkbox.tsximport React from 'react'import { useSelector } from 'react-redux'import { getCheckboxState } from 'selectors'const Checkbox: React.FC<{ name: string; label: string }> = ({ name, label }) => {  const checked = useSelector(getCheckboxState(name))  return (    <div>      <input id={name} type="checkbox" checked={checked} />      <label htmlFor={name}>{label}</label>    </div>  )}export default Checkbox

// components/Checkbox/Checkbox.test.tsximport { ReactElement } from 'react'import { Provider } from 'react-redux'import { create } from 'react-test-renderer'import { createAppStore } from 'store'import { State } from 'types'import Checkbox from '.'export const renderWithRedux = (node: ReactElement, initialState: State = { checkboxes: {} }) => {  const store = createAppStore(initialState)  return create(<Provider store={store}>{node}</Provider>)}describe('Checkbox', () => {  it('renders checkbox input', () => {    const checkboxName = 'anyName'    const renderer = renderWithRedux(<Checkbox />)    const element = renderer.root.findByType('input')    expect(element.props.type).toBe('checkbox')  })  it('renders label', () => {    const labelText = 'anyLabel'    const renderer = renderWithRedux(<Checkbox label={labelText} />)    const element = renderer.root.findByType('label')    expect(element.props.children).toBe(labelText)  })  it('sets name prop as input id', () => {    const checkboxName = 'anyCheckbox'    const renderer = renderWithRedux(<Checkbox name={checkboxName} label={'anyLabel'} />)    const element = renderer.root.findByType('input')    expect(element.props.id).toBe(checkboxName)  })  it('sets name prop as label htmlFor', () => {    const checkboxName = 'anyCheckbox'    const renderer = renderWithRedux(<Checkbox name={checkboxName} label={'anyLabel'} />)    const element = renderer.root.findByType('label')    expect(element.props.htmlFor).toBe(checkboxName)  })  it('sets checked flag from store when it`s checked', () => {    const initialState = { checkboxes: { anyName: true } }    const renderer = renderWithRedux(<Checkbox name="anyName" label="anyLabel" />, initialState)    const element = renderer.root.findByType('input')    expect(element.props.checked).toBe(true)  })})

// utils.tsximport { ReactElement } from 'react'import { Provider } from 'react-redux'import { create } from 'react-test-renderer'import { Store } from './types'import { createAppStore } from './store'export const renderWithRedux = (node: ReactElement, initialState: Store = { checkboxes: {} }) => {  const store = createAppStore(initialState)  return create(<Provider store={store}>{node}</Provider>)}

// components/Checkbox/Checkbox.test.tsximport { renderWithRedux } from 'utils'import Checkbox from '.'describe('Checkbox', () => {

// components/Checkbox/Checkbox.test.tsx  it('sets checked flag from store when it`s unchecked', () => {    const initialState = { checkboxes: { anyName: false } }    const renderer = renderWithRedux(<Checkbox name="anyName" label="anyLabel" />, initialState)    const element = renderer.root.findByType('input')    expect(element.props.checked).toBe(false)  })

// components/Checkbox/Checkbox.test.tsx  test.each`    storedState | state    ${true}     | ${'checked'}    ${false}    | ${'unchecked'}  `('sets checked flag from store when it`s $state', ({ storedState }) => {    const initialState = { checkboxes: { anyName: storedState } }    const renderer = renderWithRedux(<Checkbox name="anyName" label="anyLabel" />, initialState)    const element = renderer.root.findByType('input')    expect(element.props.checked).toBe(storedState)  })

// components/Checkbox/Checkbox.test.tsximport { act } from 'react-test-renderer'// omit old code    it('changes it`s checked state when it`s clicked', () => {    const initialState = { checkboxes: { anyName: false } }    const renderer = renderWithRedux(<Checkbox name="anyName" label="anyLabel" />, initialState)    const element = renderer.root.findByType('input')    act(() => {      element.props.onChange()    })    expect(element.props.checked).toBe(true)  })

// components/Checkbox/Checkbox.tsximport React from 'react'import { useDispatch, useSelector } from 'react-redux'import { getCheckboxState } from 'selectors'import { checkboxClick } from 'actions'const Checkbox: React.FC<{ name: string; label: string }> = ({ name, label }) => {  const dispatch = useDispatch()  const checked = useSelector(getCheckboxState(name))  const handleClick = React.useCallback(() => {    dispatch(checkboxClick(name))  }, [dispatch, name])  return (    <div>      <input id={name} type="checkbox" checked={checked} onChange={handleClick} />      <label htmlFor={name}>{label}</label>    </div>  )}export default Checkbox

AgreementSubmitButton

// components/AgreementSubmitButton/AgreementSubmitButton.test.tsximport { renderWithRedux } from 'utils'import AgreementSubmitButton from '.'describe('AgreementSubmitButton', () => {  it('renders button with label Submit', () => {    const renderer = renderWithRedux(<AgreementSubmitButton />)    const element = renderer.root.findByType('input')    expect(element.props.type).toBe('button')    expect(element.props.value).toBe('Submit')  })})

// components/AgreementSubmitButton/package.json{  "main": "./AgreementSubmitButton"}// components/AgreementSubmitButton/AgreementSubmitButton.tsximport React from 'react'const AgreementSubmitButton: React.FC = () => {  return <input type="button" value="Submit" />}export default AgreementSubmitButton

// components/AgreementSubmitButton/AgreementSubmitButton.test.tsx  test.each`    checkboxState | disabled | agreementState    ${false}      | ${true}  | ${'not agreed'}    ${true}       | ${false} | ${'agreed'}  `(    'render button with disabled=$disabled when agreement is $agreementState',    ({ checkboxState, disabled }) => {      const initialState = { checkboxes: { agree: checkboxState } }      const renderer = renderWithRedux(<AgreementSubmitButton />, initialState)      const element = renderer.root.findByType('input')      expect(element.props.disabled).toBe(disabled)    },  )

// components/AgreementSubmitButton/AgreementSubmitButton.tsximport React from 'react'import { useSelector } from 'react-redux'import { getCheckboxState } from 'selectors/selectors'const AgreementSubmitButton: React.FC = () => {  const checkboxName = 'agree'  const agreed = useSelector(getCheckboxState(checkboxName))  return <input type="button" value="Submit" disabled={!agreed} />}export default AgreementSubmitButton

LicenseAgreement

1. Содержится заголовок и непосредственно текст лицензионного соглашения. Эта часть компонента не требует тестирования.
2. На форме имеется компонент Checkbox с определенными label и name. Это можно и нужно тестировать.
3. На форме имеется кнопка AgreementSubmitButton. Это тоже прекрасно поддаётся тестированию.

// components/LicenseAgreement/LicenseAgreement.test.tsximport { renderWithRedux } from 'utils'import Checkbox from 'components/Checkbox'import LicenseAgreement from '.'jest.mock('components/Checkbox', () => () => null)describe('LicenseAgreement', () => {  it('renders Checkbox with name and label', () => {    const renderer = renderWithRedux(<LicenseAgreement />)    const element = renderer.root.findByType(Checkbox)    expect(element.props.name).toBe('agree')    expect(element.props.label).toBe('Agree')  })})

// components/LicenseAgreement/package.json{  "main": "./LicenseAgreement"}// src/components/LicenseAgreement/LicenseAgreement.tsximport React from 'react'import Checkbox from 'components/Checkbox'const LicenseAgreement: React.FC = () => {  return (    <div>      <Checkbox name="agree" label="Agree" />    </div>  )}export default LicenseAgreement

// components/LicenseAgreement/LicenseAgreement.test.tsximport { renderWithRedux } from 'utils'import Checkbox from 'components/Checkbox'import AgreementSubmitButton from 'components/AgreementSubmitButton'import LicenseAgreement from '.'jest.mock('components/Checkbox', () => () => null)jest.mock('components/AgreementSubmitButton', () => () => null)describe('LicenseAgreement', () => {  it('renders Checkbox with name and label', () => {    const renderer = renderWithRedux(<LicenseAgreement />)    const element = renderer.root.findByType(Checkbox)    expect(element.props.name).toBe('agree')    expect(element.props.label).toBe('Agree')  })  it('renders SubmitAgreementButton', () => {    const renderer = renderWithRedux(<LicenseAgreement />)    expect(() => renderer.root.findByType(AgreementSubmitButton)).not.toThrow()  })})

// src/components/LicenseAgreement/LicenseAgreement.tsximport React from 'react'import Checkbox from 'components/Checkbox'import AgreementSubmitButton from 'components/AgreementSubmitButton'const LicenseAgreement: React.FC = () => {  return (    <div>      <Checkbox name="agree" label="Agree" />      <AgreementSubmitButton />    </div>  )}export default LicenseAgreement

Ключ на старт!

// App.test.tsximport { renderWithRedux } from 'utils'import LicenseAgreement from 'components/LicenseAgreement'import App from 'App'jest.mock('components/LicenseAgreement', () => () => null)test('renders LicenseAgreement', () => {  const renderer = renderWithRedux(<App />)  expect(() => renderer.root.findByType(LicenseAgreement)).not.toThrow()})

// App.tsximport React from 'react'import LicenseAgreement from 'components/LicenseAgreement'const App: React.FC = () => {  return <LicenseAgreement />}export default App

// index.tsximport React from 'react'import ReactDOM from 'react-dom'import { Provider } from 'react-redux'import 'index.css'import store from 'store'import App from 'App'ReactDOM.render(  <React.StrictMode>    <Provider store={store}>      <App />    </Provider>  </React.StrictMode>,  document.getElementById('root'),)

Заключение

• Официальный сайт Redux
• Best practice по разработке приложений с использованием Redux
• Фреймворк для тестирования JS приложений Jest
• Хабрастатья Андрея Хижняка REACT + JEST = TDD

const input = [[0, 0], [1, 0], [0, 1], [1, 1]];const inputTensor = tf.tensor(input, [input.length, 2]);

const output = [[0], [1], [1], [1]]const outputTensor = tf.tensor(output, [output.length, 1]);

const model = tf.sequential();model.add(      tf.layers.dense({ inputShape: [2], units: 1, activation: 'sigmoid' }));

model.compile({    optimizer: tf.train.sgd(0.1),    loss: 'meanSquaredError'});

На практике по умолчанию сразу можно выбирать adam оптимизатор, который имеет лучшие показатели сходимости модели, в отличии от sgd обучающий шаг (learning rate) на каждом этапе обучения задается в зависимости от истории предыдущих шагов и не является постоянным на протяжении всего процесса обучения.

async function initModel() {    // skip for brevity    await model.fit(trainingInputTensor, trainingOutputTensor, {        epochs: 1000,        shuffle: true,        callbacks: {            onEpochEnd: async (epoch, { loss }) => {                // any actions on during any epoch of training                await tf.nextFrame();            }        }    })}

const testInput = generateInputs(10);const testInputTensor = tf.tensor(testInput, [testInput.length, 2]);const output = model.predict(testInputTensor).arraySync();

import React, { useEffect, useState } from 'react';import LossPlot from './components/LossPlot';import Canvas from './components/Canvas';import * as tf from "@tensorflow/tfjs";let model;export default () => {    const [data, changeData] = useState([]);    const [lossHistory, changeLossHistory] = useState([]);    useEffect(() => {        async function initModel() {            const input = [[0, 0], [1, 0], [0, 1], [1, 1]];            const inputTensor = tf.tensor(input, [input.length, 2]);            const output = [[0], [1], [1], [1]]            const outputTensor = tf.tensor(output, [output.length, 1]);            const testInput = generateInputs(10);            const testInputTensor = tf.tensor(testInput, [testInput.length, 2]);            model = tf.sequential();            model.add(            tf.layers.dense({ inputShape:[2], units:1, activation: 'sigmoid'})            );            model.compile({                optimizer: tf.train.adam(0.1),                loss: 'meanSquaredError'            });            await model.fit(inputTensor, outputTensor, {                epochs: 100,                shuffle: true,                callbacks: {                    onEpochEnd: async (epoch, { loss }) => {                        changeLossHistory((prevHistory) => [...prevHistory, {                            epoch,                            loss                        }]);                        const output = model.predict(testInputTensor)                                                       .arraySync();                        changeData(() => output.map(([out], i) => ({                            out,                            x1: testInput[i][0],                            x2: testInput[i][1]                        })));                        await tf.nextFrame();                    }                }            })        }        initModel();    }, []);    return (        <div>            <Canvas data={data} squareAmount={10}/>            <LossPlot loss={lossHistory}/>        </div>    );}function generateInputs(squareAmount) {    const step = 1 / squareAmount;    const input = [];    for (let i = 0; i < 1; i += step) {        for (let j = 0; j < 1; j += step) {            input.push([i, j]);        }    }    return input;}

const input = [[0, 0], [1, 0], [0, 1], [1, 1]];const inputTensor = tf.tensor(input, [input.length, 2]);const output = [[0], [1], [1], [0]]const outputTensor = tf.tensor(output, [output.length, 1]);

model = tf.sequential();model.add(    tf.layers.dense({ inputShape: [2], units: 2, activation: 'sigmoid' }));model.add(    tf.layers.dense({ units: 1, activation: 'sigmoid' }));