От Редакса к хукам?

В Реакте в версии 16.7.0 появились Hooks (дальше по тексту — хуки). Это API, которое позволяет использовать локальный стейт без использования классов. И среди них есть один, который, как мне кажется, может заменить собой Редакс.

В этой статье я предполагаю, что вы знаете разницу между функциональными компонентами и классами, в курсе о локальном стейте и жизненном цикле компонентов и о том, как работает Редакс. Без этого вникнуть будет трудно, но всё в одну статью я бы не уместил, так что вот ¯\_(ツ)_/¯

Что за хуки?

Раньше, чтобы использовать стейт в компоненте, приходилось писать класс. Хуки позволяют использовать стейт в функциональных компонентах без применения классов.

Например, здесь мы используем хук useState, чтобы создать и использовать переменную counter:

import React, { useState } from "react";

const SimpleComponent = () => {
  const [counter, setCounter] = useState(0);
  // в первый раз значение counter будет равно тому, что мы передаём в useState
  // затем — тому, что мы установим через setCounter
  return <div>{counter}</div>;
};

useState возвращает кортеж из значения и функции, которая будет это значение обновлять.

Из-за того, что в одном компоненте можно использовать несколько хуков по несколько раз, у них есть ограничения и правила. Подробнее об этом написано в документации и рассказано в докладе на Реакт-конфе.

useReducer

useReducer — это хук, который по принципу работы схож с редьюсерами из Редакса.

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  // initialState — начальное состояние
  // reducer — функция, которая принимает state и action
  //           и обрабатывает изменение состояния
  //
  // state — текущее состояние
  // dispatch — функция, которая будет дёргать экшены,
  //            чтобы обновить состояние

  return <div>Hello world</div>;
};

По принципу работы это и есть Редакс. Проблема только в том, что переменные state и dispatch находятся внутри области видимости функции App, а значит использовать этот редьюсер в других компонентах у нас не получится.

...Если только мы не используем контекст.

Context API

Чтобы решить проблему с тем, что разные компоненты должны делить общее состояние, мы можем использовать состояние корневого компонента и пробрасывать его через пропсы вниз по дереву.

Это работает, но если дерево большое, то и пробрасывать пропсы приходится через каждый уровень вложенности. Возникает так называемый prop drilling. Схематично это выглядит, как на картинке слева:

Редакс помимо работы с состоянием решал и эту проблему тоже. С ним мы создаём лишь одно хранилище, к которому может обращаться любой компонент. Таким образом нам не требуется пробрасывать свойства через всё дерево.

Ту же проблему решает и контекст в Реакте. Мы создаём контекст, через провайдер указываем, что именно нужно хранить и передавать, а через консьюмер — в каком компоненте эти значения забирать и использовать:

import { createContext } from "react";
// создаём контекст
const StoreContext = createContext();

const App = () => (
  // через провайдер в свойстве value указываем значение,
  // которое нам надо хранить и как-то использовать в других компонентах
  <StoreContext.Provider value={{ meaningOfLife: 42 }}>
    <OtherComponent />
  </StoreContext.Provider>
);

const OtherComponent = () => {
  // через консьюмер получаем доступ к значению
  return (
    <StoreContext.Consumer>
      {({ meaningOfLife }) => <div>{meaningOfLife}</div>}
    </StoreContext.Consumer>
  );
};

Вызывать консьюмер можно где угодно, и это позволяет делить состояние между компонентами. И тут возникает мысль, нельзя ли заменить Редакс на смесь хуков и контекста. Ну и эт, вроде, можно.

Пример

Я написал простенькое приложение с использованием Редакса и с использованием контекста и хуков. Это счётчик, значение которого можно менять кнопками, либо меняя значение в инпуте, а также обнулять его нажатием на кнопку из другого компонента.

По структуре оно будет состоять из корневого компонента App, компонента формы Form и ещё одного компонента с кнопкой внизу Display. Схематично можно изобразить так:

Компоненты Form и Display зависят от хранилища, в котором содержится состояние приложения. Все события кнопок и инпута вызывают экшены, которые будут обновлять хранилище.

• Пример с Редаксом.
• Пример с хуками и контекстом.
• Исходники для самых нетерпеливых.

С использованием Редакса

Вначале создадим хранилище и редьюсер, который будет заниматься его обновлением:

// reducers.js
import { combineReducers } from "redux";

const app = (state, action) => {
  switch (action.type) {
    case "PLUS":
      return { ...state, counter: state.counter + 1 };

    case "MINUS":
      return { ...state, counter: state.counter - 1 };

    case "MAGIC":
      return { ...state, counter: Math.floor(Math.random() * 100) };

    case "CHANGE":
      return { ...state, counter: +action.value };

    case "RESET":
      return { ...initialState };

    default:
      return state;
  }
};

export default combineReducers({ app });

// index.js
import { createStore } from "redux";
import rootReducer from "./reducers";
import App from "./App";

// создаём хранилище
const store = createStore(rootReducer);

// используем через провайдер
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("app"),
);

Дальше создадим экшены, которые будут вызываться событиями кнопок и инпута:

// actions.js
export const plus = () => ({ type: "PLUS" });
export const minus = () => ({ type: "MINUS" });
export const magic = () => ({ type: "MAGIC" });
export const reset = () => ({ type: "RESET" });
export const change = (e) => ({
  value: e.target.value,
  type: "CHANGE",
});

Чтобы привязать какой-то компонент к хранилищу, используем connect:

import { connect } from "react-redux";
import { reset } from "./actions";

// app — часть хранилища;
// reset — экшен;
// всё это мы привязали через connect перед экспортом ниже
const Display = ({ app, reset }) => {
  const { counter } = app;

  return (
    <footer>
      <p>Another component knows that counter equals to {counter} as well!</p>
      <p>
        It even can
        <button onClick={reset}>reset the coutner</button>
      </p>
    </footer>
  );
};

// мапим свойства из хранилища и экшены
// на пропсы компонента
export default connect((state) => ({ app: state.app }), { reset })(Display);

В результате приложение будет работать так.

Контекст + хуки

Теперь напишем то же самое без использования Редакса. Используем useReducer:

// store.js
export const initialState = { counter: 0 };

// редьюсер точно такой же, как в прошлый раз
export const reducer = (state, action) => {
  // ...
};

// index.js
import { reducer, initialState } from "./store";

const App = () => {
  // создаём в корневом компоненте хранилище
  // и функцию для его обновления
  const [state, dispatch] = useReducer(reducer, initialState);
  return <div></div>;
};

Чтобы пробросить значения из хранилища компонентам, воспользуемся контекстом:

// context.js
import { createContext } from "react";
export const StoreContext = createContext();

// index.js
import { reducer, initialState } from "./store";
// импортируем созданный контекст
import { StoreContext } from "./context";

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // используем провайдер, чтобы передать в контекст
  // хранилище и функцию для обновления
  return (
    <StoreContext.Provider value={{ dispatch, state }}>
      <Form />
      <Display />
    </StoreContext.Provider>
  );
};

export default App;

Чтобы привязать какой-то компонент, используем консьюмер:

import React from "react";
// импортируем контекст
import { StoreContext } from "./context";
// экшены точно такие же, как в прошлый раз
import { reset } from "./actions";

const Display = () => (
  // получаем доступ к тому, что хранится в контексте
  <StoreContext.Consumer>
    // в нашем случае — state и dispatch
    {({ state, dispatch }) => (
      <footer>
        // используем state, чтобы вывести значение счётчика
        <p>{state.counter}</p>
        // используем dispatch, чтобы дёрнуть экшен
        <button onClick={() => dispatch(reset())}>reset</button>
      </footer>
    )}
  </StoreContext.Consumer>
);

export default Display;

А ещё можно сделать код чище, заменив консьюмер на useContext:

import React, { useContext } from "react";
import { StoreContext } from "./context";
import { reset } from "./actions";

const Display = () => {
  // вызываем useContext, передавая аргументом нужный контекст
  const { state, dispatch } = useContext(StoreContext);

  return (
    // убираем консьюмер
    <footer>
      <p>{state.counter}</p>
      <button onClick={() => dispatch(reset())}>reset</button>
    </footer>
  );
};

export default Display;

И работает оно точно так же.

А чо по весу и перформансу?

Я не удивился, когда бандл ужался на 12 кБ: с Редаксом — 166, без него — 154. Это логично, меньше зависимостей — меньше вес.

А вот прирост в скорости обработки экшенов и отрисовки меня слегка удивил. Я проводил измерения с помощью console.time и performance.measure. Средние значения за 100 итераций вышли такими:

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

Минусы

Вызов экшенов стал чуть более многословным из-за прямого использования dispatch. И если работать с контекстом без useContext, придётся использовать паттерн render-prop, из-за чего может подняться щит-сторм ¯\_(ツ)_/¯

Про вероятную необходимость системы селекторов я уже говорил выше. Без неё приложение может полностью перерисовываться на каждый чих, что сведёт на нет весь смысл подхода Реакта к построению интерфейсов.

Но если серьёзно, хуки — пока что в стадии RFC, и возможно многое поменяется. Поэтому переписывать свои приложения на них не советует даже Дэн Абрамов. То есть это экспериментальная фигня.

Хотя выглядит всё равно заманчиво :–)

Ссылки

• Гитхаб
• Приложение на Редаксе
• Приложение на хуках с контекстом

Документация

• Context API
• Hooks API
• useReducer
• useContext
• Hooks rules

Доклады

• React Today and Tomorrow
• 90% Cleaner React With Hooks

Статьи со сравнениями

• Everything You Need to Know About Context API
• Context API vs Redux
• Redux против React Context API

Измерения перформанса

• Measuring Performance with console.time
• Performance.measure
• Measuring Functions Performance