Как использовать Redux с React Hooks

React.js Redux

Автор статьи: IMWeb Команда IMWeb Источник оригинального текста:Сообщество IMWebВоспроизведение запрещено без согласия

Оригинальный адрес:IT next.IO/как использовать-…

React-reduxВышла версия 7.1.0 хуков. Это означает, что мы можем использовать последние лучшие практики React.

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

Простые компоненты Redux

Это очень простой и традиционный компонент подключения Redux. Как бы вы реорганизовали его с помощью хуков?

import React, { Component } from "react";
import { connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

class Toggle extends Component {
  render() {
    const { ui, toggleSwitch } = this.props;
    return (
      <div>
        <div>{JSON.stringify(ui)}</div>
        <input
          type="checkbox"
          value={ui.toggle}
          onChange={toggleSwitch}
        />
      </div>
    );
  }
}

const mapStateToProps = ({ ui }) => ({
  ui
});

export default connect(
  mapStateToProps,
  { toggleSwitch }
)(Toggle);

Выше показан простой компонент, который переключает флажок. Для простоты у нас есть только одно состояние,toggleявляется логическим значением.

Переключить флажки с помощью Redux

Если у вас есть какие-то знания о хуках, вы, вероятно, знаете, что хуки нужно использовать в функциональных компонентах. Вы не можете использовать хуки в классах React.

Шаг 1. Реконструированная сборка как функция класса компонента

Преобразовать компоненты React из класса в функциональные компоненты довольно просто. Что мы должны сделать, это

import React from "react";
import { connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ ui, toggleSwitch }) => (
  <div>
    <div>{JSON.stringify(ui)}</div>
    <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} />
  </div>
);

const mapStateToProps = ({ ui }) => ({
  ui
});

export default connect(
  mapStateToProps,
  { toggleSwitch }
)(Toggle);

Примечание. Этот код уже намного короче предыдущего. Мы заменили синтаксис класса на более простой синтаксис функции. Мы также деструктурировали реквизиты параметров стрелочной функции.uiа такжеtoggleSwitchАтрибуты. Чтобы быть уверенным, переключатель все еще работает, как ожидалось.

Обычно используются крючкиuseпрефикс ключевого слова, напримерuseStateилиuseSelecor.

В настоящее время мы читаем состояние из хранилища черезmapStateToPropsи инкапсулировать функциональный компонент вconnectв ХОК.

Шаг 2 — используйте селектор

Начнем с чтения состояния с помощью хуков. нам нужно отreact-reduxимпортировать в упаковкеuseSelector. использоватьuseSelectorловушка, мы можем прочитать наше состояние.

import React from "react";
import { connect, useSelector } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ toggleSwitch }) => {
  const ui = useSelector(state => state.ui);
  return (
    <div>
      <div>{JSON.stringify(ui)}</div>
      <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} />
    </div>
  );
};

export default connect(
  null,
  { toggleSwitch }
)(Toggle);

Примечание: мы удалилиuiпараметры и использоватьuseSelectorкрюк.useSelectorПервый параметр — это сохраненное состояние.

Шаг 3 — используйте Dispatch

useDispatchХуки позволяют нам выполнять избыточные действия. мы начинаем сreact-reduxимпорт пакетаuseDispatchкрюк.

использоватьuseDispatchОтносительно просто, мы сохраняем экземпляр хука в переменной. Мы можем вызвать функцию отправки в любом прослушивателе событий.

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { TOGGLE } from "./UiReducer";

const Toggle = () => {
  const ui = useSelector(state => state.ui);
  const dispatch = useDispatch();
  return (
    <div>
      <div>{JSON.stringify(ui)}</div>
      <input
        type="checkbox"
        value={ui.toggle}
        onChange={() => dispatch({ type: TOGGLE })}
      />
    </div>
  );
};

export default Toggle;

Примечание. Здесь мы используем константы типа при вызове функции отправки.TOGGLE, мы определяем этот тип в константе Redux и импортируем его в компонент.

export const TOGGLE = "ui/toggle";

Если вы хотите передать полезную нагрузку диспетчеру, сделайте это как обычно.

dispatch({ type: TOGGLE, payload: 'My payload' })

Суммировать

Поздравляем! Вы успешно выполнили рефакторинг классов для использования хуков. Чтобы убедиться, что все работает, давайте еще раз проверим переключатель.

Да, все работает нормально.исходный кодТеперь, когда вы понимаете основы хуков и используете хуки с редуксом, я рекомендую вам прочитатьДокументацияполучить более глубокое понимание этих понятий.

Также рекомендую прочитатьFunctional React: Quickstart with React Hooks, Redux and MobXКнига, в которой подробно рассказывается о Redux, React и MobX.

Подписывайтесь на нас

Команда IMWeb аффилирована с Tencent и является одной из самых профессиональных клиентских команд в Китае.

В течение многих лет мы фокусировались на фронтенде и отвечали за бизнесы миллиардного уровня, такие как информация QQ, регистрация QQ и группы QQ. В настоящее время занимается онлайн-образованием, тщательно совершенствуя три основных продукта: Tencent Classroom, Penguin Tutoring и ABCMouse.

Официальный сайт сообщества:

imweb.io/

Присоединяйтесь к нам:

SC.htm на сайте careers.Tencent.com/job…

Отсканируйте код, чтобы следоватьИнтерфейсное сообщество IMWebОфициальный аккаунт, получайте последние хорошие статьи о внешнем интерфейсе

Weibo, Nuggets, Github, Zhihu можно искатьIMWebилиКоманда IMWebПодписывайтесь на нас.

Категории