Что нужно знать о Redux - action/dispatch/reducer/store

Redux - это стэйт менеджер для JS приложений. Он может работать не только в React приложениях. Просто так сложилось исторически, что они часто упоминаются вместе. Redux хранит состояние в дереве объектов внутри единого стора. Единственная возможность изменить состояние - отправить action. Action это объект, который описывает действие. Он как бы отвечает на вопрос "Что я хочу изменить в состоянии?".

// types.js
const ADD_TODO = "ADD_TODO"

// actions.js
import { ADD_TODO } from "./types.js"

export const addTodoAction = {
  type: ADD_TODO,
  payload: {
     id: 1,
     text: "Изучить Redux",
     done: false
   }
}

Далее action попадает в reducer, где описано как состояние должно быть изменено ("Как я хочу изменить состояние?").

//  todo-reducer.js
import { ADD_TODO } from "./types.js"

export const todoReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO: {
      const item = action.payload
      return [...state, item]
    }
    default:
      return state
  }
}

Для чего нужен Redux?

Redux и в целом любая другая система работы с состоянием нужна для контроля над состоянием. Веб приложения усложняются, добавляются новые фичи и контроль над приложением теряется. Становится сложно охватывать большой проект как единое целое. Становится cложно передавать изменения. Встроенными способами в React их приходилось бы передавать по цепочке от одного компонента в другой или через Context API. По дороге обновленное состояние может также влиять на другие компоненты и т.д. И такая бесконтрольность расползается по всему проекту и может послужить появлению новых багов и добавит сложность в отладке. Теряется прозрачность того что происходит.

Action’ы добавляют порядок в происходящие изменения. Action - это объект, и его можно залогировать и последовательно отслеживать как меняется состояние. Подытожив, можно вывести три принципа Redux:

• Единственный источник правды - единый стор, который меняются и всегда содержит актуальные данные.
• Состояние - только для чтения. Нельзя менять его напрямую - только через action’ы.
• Изменения делаются только при помощи чистых функций.
• Эти функции (редьюсеры) принимают в качестве аргумента старое состояние и возвращают обновленное состояние. И всегда при одних и тех же данных результат этих функций будет одинаков.

Понятия в Redux

Action

Action (экшн) - это источник данных в стор, Action включает тип и некоторую информацию (payload). Тип обычно имеет строковое значение. Он нужен чтобы reducer понимал какой action был отправлен. Далее к стору будет применен payload.

Reducer

Reducer (редьюсер) - это функция, которая определяет как должно меняться состояние в зависимости от аction’а. Редьюсеры должны быть чистым функциями - они должны вычислить следующее состояние и вернуть новый объект состояния. Никаких сайд эффектов, мутаций состояния, и вызовов API в редьюсере быть не должно.

Store

Store - объединяет аction’ы и редьюсеры

• Хранит состояние приложения.
• Предоставляет доступ к состоянию через getState.
• Позволяет изменять состояние через dispatch.
• Регистрирует подписчиков через subscribe.

Теперь когда мы знаем основные понятия сформулируем флоу - движение данных в Redux. Сначала вызываем функцию dispatch, передав в нее action.

// App.jsx
import { useDispatch } from "react-redux"
import { ADD_TODO } from "./types.js"

export default App() {
  const dispatch = useDispatch()
 
  const handleTodoAdd = () => {
    dispatch({
      type: ADD_TODO,
       payload: {
         id: 1,
         text: "Изучить Redux",
         done: false
       },
    })
  }

  return (
    <button type="button" onClick={handleTodoAdd}>Добавить todo</button>
  )
}

Далее Redux вызывает переданный в него редьюсер. В редьюсер отправляется два аргумента - текущее состояние (state) и action.

//  todo-reducer.js
import { ADD_TODO } from "./types.js"

export const todoReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO: {
      const item = action.payload
      return [...state, item]
    }
    default:
      return state
  }
}

Redux сохраняет весь объект, который вернулся из корневого редьюсера. Почему редьюсер - корневой? В Redux передается один редьюсер, но его можно разделить на несколько и собрать вместе при помощи combineReducers. Результатом этой функции будет корневой редьюсер. Обычно это делается, когда в приложении есть несколько модулей и есть смысл разделить большой редьюсер на несколько маленьких. Но для мелких приложений это совсем не обязательно.

// reducers.js
import { combineReducers } from "redux"
import { todoReducer } from "./todo-reducer"

export const rootReducer = combineReducers({
  todos: todoReducer,
})

Как уже упоминалось, Redux работает не только с ReactJS. Это универсальный инструмент. Однако для того чтобы использовать его в ReactJS нужен специальный байндинг, который ставится как отдельный пакет - react-redux.

Как подключить Redux к ReactJS проекту

Установить Redux с помощью команды.

npm i redux react-redux

Проинициализировать store и обернуть приложение тегом <Provider> c переданным в него объектом store.

// index.js
import React from "react"
import ReactDOM from "react-dom/client"

import { createStore } from "redux"
import { Provider } from "react-redux"

import App from "./App"
import { rootReducer } from "./reducers"

const store = createStore(rootReducer)

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Как создать компонент?

React приложения состоят из компонентов. Компонент — это часть пользовательского интерфейса. Компонент содержит собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница. React компоненты — это JavaScript функции, которые возвращают разметку:

function MyButton() {
  return <button>Это кнопка</button>;
}

Теперь, когда мы объявили компонент MyButton, мы можем вложить его в другой компонент:

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Обратите внимание, что <MyButton /> начинается с заглавной буквы. Это соглашение, которое дает понять, что это React компонент. Имена React компонентов всегда должны начинаться с заглавной буквы, а теги HTML должны быть строчными. Ключевые слова export default определяют основной экспортируемый из файла компонент.

Как добавить разметку с JSX?

Особая разметки, которую вы видели выше, называется JSX. Не обязательно использовать JSX разметку, но большинство проектов React используют JSX для удобства. JSX строже, чем HTML. Вы должны закрыть теги типа <br />. Ваш компонент также не может возвращать несколько тегов JSX. Вы должны обернуть их в общий родитель, например <div>...</div> или пустую оболочку - фрагмент - <>...</>:

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}

Как добавить стили?

Для того чтобы указать CSS класс в React нужно использовать className. Он работает так же, как атрибут class в HTML:

<img className="avatar" />

Затем вы пишете правила CSS для него в отдельном файле CSS:

.avatar {
  border-radius: 50%;
}

Как отобразить данные в компоненте?

JSX позволяет размещать разметку внутри JavaScript функции. Фигурные скобки позволяют вам писать JavaScript внутри разметки, чтобы вы могли внедрить показать значение переменной из своего кода. Например, это фрагмент кода покажет имя пользователя, т.к. в поле user.name содержится строка с именем пользователя:

return <h1>{user.name}</h1>;

Вы также можете использовать JavaScript из JSX атрибутов. В этом случае нужно использовать фигурные скобки вместо кавычек. Например, className="avatar" передает строку "avatar" как CSS класс, но src={user.imageUrl} считывает значение JavaScript переменной user.imageUrl, а затем передает это значение как атрибут src:

return <img className="avatar" src={user.imageUrl} />;

В фигурные скобки в JSX можно поместить более сложные выражения, например, конкатенацию строк:

const user = {
  name: 'John',
  imageUrl: 'https://example.com/userpic.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}

В приведенном выше примере style={{}} не является специальным синтаксисом, а является обычным объектом {} внутри фигурных скобок style={ } JSX. Вы можете использовать атрибут style, когда ваши стили зависят от переменных JavaScript.

Как отобразить элементы по условию?

В React нет специального синтаксиса для написания условий. Вместо этого можно использовать те же приемы, что и при написании обычного JavaScript кода. Например, вы можете использовать оператор if для условного включения JSX:

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return <div>{content}</div>;

Если вы предпочитаете более компактный код, вы можете использовать условный ? оператор. В отличие от if, он работает внутри JSX:

<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>

Если вам не нужна ветвь else, вы также можете использовать более короткий синтаксис логического &&:

<div>{isLoggedIn && <AdminPanel />}</div>

Все эти подходы также работают для указанных по условию атрибутов. Если вы не знакомы с некоторыми элементами этого синтаксиса JavaScript, вы можете начать с постоянного использования if...else.

Как отобразить список?

Вы будете полагаться на возможности JavaScript, такие как цикл for и метод массива map() для отображения списков компонентов. Предположим, есть набор продуктов:

const products = [
  { title: "Капуста", id: 1 },
  { title: "Чеснок", id: 2 },
  { title: "Яблоко", id: 3 },
];

Внутри компонента для преобразования массива продуктов в массив элементов <li> используйте метод map():

const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));

return <ul>{listItems}</ul>;

Обратите внимание, что <li> имеет атрибут key. Для каждого элемента в списке вы должны передать строку или число, которое однозначно идентифицирует этот элемент среди его соседних элементов. Этот ключ (key) должен определяться из ваших данных, таких как идентификатор из базы данных. React будет полагаться на ваши ключи, чтобы понять, что произошло, если вы позже вставите, удалите или измените порядок элементов.

const products = [
  { title: "Капуста", isFruit: false, id: 1 },
  { title: "Чеснок", isFruit: false, id: 2 },
  { title: "Яблоко", isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map((product) => (
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen',
      }}
    >
      {product.title}
    </li>
  ));

  return <ul>{listItems}</ul>;
}

Как работать с событиями компонента?

Для того чтобы реагировать на события нужно внутри компонента объявить функцию-обработчик события.

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Обратите внимание, что onClick={handleClick} не имеет круглых скобок в конце. Это говорит о том, что это не вызов функции, а передача функции. React вызовет ваш обработчик событий, когда пользователь нажмет кнопку.

Как обновить данные компонентов?

Часто необходимо, чтобы компонент «запоминал» некоторую информацию и отображал ее. Например, мы хотим подсчитать, сколько раз была нажата кнопка. Для этого нужно добавить состояние к компоненту. Во-первых, импортируем useState из React: Теперь мы можем объявить переменную состояния внутри компонента:

function MyButton() {
  const [count, setCount] = useState(0);

useState возвращает две вещи: текущее состояние (count) и функцию, которая позволяет обновить это состояние (setCount). Можно дать им любые имена, но принято называть их по такому шаблону - [something, setSomething]. При первом отображении кнопки count будет равен 0, потому что мы передали 0 в useState(). Для того чтобы изменить состояние, нужно вызвать setCount() и передайте ему новое значение. Нажатие на эту кнопку увеличит счетчик:

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

React снова вызовет функцию-компонент. На этот раз счет будет 1. Затем будет 2. И так далее. Если добавить один и тот же компонент несколько раз, каждый из них получит свое собственное состояние.

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Счетчики, которые обновляются независимо</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

Обратите внимание, как каждая кнопка «запоминает» свое собственное состояние счетчика и не влияет на другие кнопки.

Как использовать хуки?

Функции, начинающиеся с use, называются хуками. useState — это встроенный хук, предоставляемый React. Вы также можете написать свои собственные хуки, комбинируя существующие. Хуки накладывают больше ограничений, чем обычные функции. Хуки можно вызывать только на верхнем уровне компонентов (или других хуков). Если вы хотите использовать useState в условии или цикле, создайте новый компонент и поместите его туда.

Как передавать данные между компонентами?

В предыдущем примере у каждой MyButton был собственный независимый счетчик, и при нажатии каждой кнопки менялся только счетчик нажатой кнопки. Что если требуется обновлять эти счетчики вместе? Чтобы оба компонента MyButton отображали одно и то же число и обновлялись вместе, вам нужно переместить состояние от отдельных кнопок «вверх» к ближайшему родительскому компоненту, содержащему их все. Теперь, когда при нажатии любой кнопки-счетчика, счетчик в MyApp изменится, что изменит оба счетчика в MyButton. Вот как это можно выразить в коде.

Во-первых, переместим состояние из MyButton в MyApp:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  //
}

Затем передадим состояние из MyApp в каждый MyButton вместе с общим обработчиком кликов через пропсы. Передавать информацию в MyButton можно с помощью фигурных скобок JSX, точно так же, как мы делали это раньше со встроенными тегами, такими как <img>:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Счетчики, изменяющиеся вместе</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

Информация, которую передается таким образом, называется пропсами. Теперь компонент MyApp содержит состояние счетчика и обработчик события handleClick и передает их оба в качестве пропсов каждой из кнопок. Наконец, изменим MyButton, чтобы он считывал пропсы, которые мы ему передали из родительского компонента:

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}

Когда вы нажимаете кнопку, срабатывает обработчик onClick. В проп onClick каждой кнопки передается функция handleClick внутри MyApp. Этот код вызывает setCount(count + 1), увеличивая переменную состояния count. Новое значение счетчика передается в качестве пропса каждой кнопке, поэтому все они показывают новое значение. Это называется «подъем состояния вверх». Переместив состояние вверх, мы сделали его общим для этих компонентов.

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Счетчики, изменяющиеся вместе</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}

Подробнее о всех случаях передачи данных между компонентами можно прочитать здесь.