предисловие

Иностранцам очень сложно писать технические статьи. Это простой для понимания и пошаговый учебник по Redux, написанный программистом из-за рубежа. В духе обмена я перевел его для всеобщего обозрения. ссылка в конце статьи.Я не хочу видеть свой перевод.Просто перейдите к исходному тексту.

Ниже приведен английский каталог оригинального учебника.

Эта статья будет обновляться примерно на треть первой.Если она понравится друзьям, я обновлю остальные.Если ее никто не читает, у меня нет мотивации обновлять ее.

Начни получать удовольствие от чтения!

Этот каталог обновлений

• 1. Кому подходит это руководство
• 2. Чему вы научитесь
• 3. Небольшая среда разработки React
• 4. Что такое состояние
• 5. Какую проблему решает Redux
• 6. Почему вам стоит изучить Redux
• 7. Стоит ли использовать Redux?
• 8. Знакомство с магазином Redux
• 9. Знакомство с редюсерами Redux
• 10. Познакомьтесь с действиями Redux

текст

Когда я впервые изучил Redux, я надеялся найти самый простой учебник.

Несмотря на то, что в Интернете есть множество руководств, я до сих пор не могу понять некоторые концепции Redux.

Я знаю, что такое состояние, но что такое действия, создатели и редюсеры?

Самое главное, я до сих пор не знаю, как совместить React и Redux

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

Кому подходит это руководство

Следующий учебник Redux предназначен для этих людей:

• Вы хорошо разбираетесь в Javascript, ES6 и React
• Вы ожидаете самый простой способ изучить Redux

чему вы научитесь

В следующем руководстве вы узнаете:

1. Что такое Редукс
2. Как использовать Redux с React

Небольшая среда разработки React

До начала,Убедитесь, что у вас есть среда разработки React

Вы можете обратиться к моему другому учебникуКак настроить среду React, webpack и Babel, или вы также можете использоватьcreate-react-appстроительные леса

что такое государство

Чтобы понять Redux, вы должны сначала понятьstate

Если вы использовали React раньше, термин «состояние» вам знаком.

Например, вы ранее написали что-то вроде следующегоКомпоненты React с отслеживанием состояния:

import React, { Component } from "react";
class ExampleComponent extends Component {
  constructor() {
    super();
    this.state = {
      articles: [
        { title: "React Redux Tutorial for Beginners", id: 1 },
        { title: "Redux e React: cos'è Redux e come usarlo con React", id: 2 }
      ]
    };
  }
  render() {
    const { articles } = this.state;
    return <ul>{articles.map(el => <li key={el.id}>{el.title}</li>)}</ul>;
  }
}

Компонент React с отслеживанием состояния — это класс JavaScript ES6.

Каждый компонент React с состоянием имеетСвое собственное государство

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

Состояние может меняться в ответ на действия и события.В React компоненты могут бытьsetStateОбновите свой статус

но,каков статус, термин состояние не привязан к React, состояние всегда с вами, даже еслиПростейшие приложения JavaScript имеют состояние, рассмотрим следующий пример:

Пользователь нажал кнопку

Вверху появляется всплывающее окно

посмотри,В этом тривиальном взаимодействии есть состояние, мы должны иметь дело с

Мы можем использовать объект JavaScript для описания начального состояния.

var state = {
  buttonClicked: 'no',
  modalOpen: 'no'
}

Когда пользователь нажимает кнопку, этот объект становится

var state = {
  buttonClicked: 'yes',
  modalOpen: 'yes'
}

Вместо того, чтобы хранить это состояние в объекте,Как вы отслеживаете эти состояния в JavaScript? будь тоСуществует библиотека, которая может помочь нам более надежно отслеживать эти состояния.?

Какую проблему решает Redux

Типичное приложение Javascript заполнено состояниями, например:

• что видит пользователь (данные)
• какие данные мы получаем
• какой URL мы показываем пользователю
• Какие элементы выбраны на странице
• Есть ли ошибки в приложении? это тоже государство

Состояние везде в Javascript, как вы можете себе представить.Сколько состояний имеет приложение React?

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

Иногда нам может понадобиться постоянно отслеживать и получать изменения состояния, но разработчики интерфейса не должны обрабатывать эту бизнес-логику, так каковы же альтернативы для управления состоянием компонентов React?

**Redux** — один из них. Redux решает дилемму, которая поначалу может быть неочевидной, он дает каждому компоненту React необходимое состояние.

Redux поддерживает состояние в одном месте

Конечно, с Redux получение и управление состоянием не зависят от React.Преимущества этого подхода могут быть не очевидны поначалу, но по мере того, как вы узнаете больше о Redux, преимущества будут становиться все более и более очевидными.

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

Почему вам стоит изучить Redux

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

Не волнуйтесь, я начал изучать Redux, потому что:

• Я на 100% заинтересован в том, чтобы понять, как работает Redux.
• Я отчаянно хочу улучшить свои навыки React
• Комбинация React и Redux очень распространена
• Redux — это независимый фреймворк общего назначения, после изучения которого его можно использовать везде (vue, Angular).

Итак, является ли Redux хорошим подведением итогов? Состояние присутствует во всех приложениях JavaScript, поэтому управление состоянием всегда было нерешенной проблемой в JavaScript.

Еще один факт: большинство реальных приложений JavaScript используют библиотеки управления состоянием.

Так исчезнет ли Redux в будущем? Это возможно, но этот паттерн будет длиться вечно, и он чрезвычайно ценен для вашей карьеры фронтенд-разработчика.

Наконец, изучение Redux или соответствующей библиотеки управления состоянием является обязательным, даже если кривая обучения крутая.

Если вы используете Redux

Используйте Redux, Flux или Mobx для управления состоянием на ваше усмотрение.

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

Но я больше склонен думать о Redux как о полезной инвестиции, а не о затратах.

Еще один распространенный вопрос для людей, начинающих изучать Redux: как узнать, когда вашему приложению нужно использовать Redux?

Если вы считаете, что не существует универсального правила, позволяющего определить, когда вам нужно использовать Redux для управления состоянием, Redux также предоставляет много возможностей для разработчиков JavaScript, отладки, воспроизведения действий и т. д.

Когда я запускаю проект React, я не могу не добавить Redux прямо в проект, но как разработчики мы можем раздувать код

Итак, как вы думаете, когда следует добавить Redux в ваш проект?

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

У Дэйва Седдиа очень хорошая статьяchildren props as an alternative before reaching for Redux, в котором есть много информации об использовании реквизитов дочерних компонентов в качестве альтернативы Redux.

Не забывайте, что проекты React можно легко рефакторить даже после добавления Redux.

Мое краткое изложение ситуаций, которые вам необходимо рассмотреть с помощью Redux, выглядит следующим образом:

• Многие компоненты React должны получить одно и то же состояние, но не иметь отношений родитель-потомок.
• Передача состояния нескольким компонентам с реквизитами сложна

Не волнуйтесь, если вышеизложенное не имеет для вас никакого смысла, Дэн Абрамов однажды сказал: «Flux как очки, вы поймете, когда они вам понадобятся».

Прежде чем идти дальше, вам нужно уделить время тому, чтобы понять, какую проблему решает Redux и мотивированы ли вы ее изучать.

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

Далее мы начнем вводить некоторые понятия

• Основы Редукса
• Объединение Redux и React

Опять же, убедитесь, что у вас настроена среда разработки React: вы можете следоватьHow to set up React, webpack, and BabelСледуйте этому руководству или используйте скаффолдинг create-react-app для создания

Знакомство с магазином Redux

Actions, Reducers, я все еще немного знаю об этом, но я не понимаю одного: как эти вещи объединяются?

Магазин в Redux все тщательно оформляет, и повторюсь: магазин

Магазин как человеческий мозг для Redux: это какая-то магия

Хранилище Redux является фундаментальным, и в нем хранится состояние всего приложения.

Перейдите в среду разработки React и установите Redux:

npm i redux --save-dev

Создать каталог для магазина

mkdir -p src/js/store

существуетsrc/js/storeсоздать новый файл вindex.js, инициализировать хранилище

// src/js/store/index.js
import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;

Как видно из приведенного выше кода,store является результатом возврата createStore, createStore — это функция из библиотеки redux

createStore принимает редюсер в качестве первого параметра, поэтому мы передаем rootReducer

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

Наиболее важным понятием являетсяСостояние редукса исходит от редукторов, давайте сделаем это понятнее, редукторы генерируют состояние вашего приложения.

Зная это, мы можем перейти к нашему первому редюсеру Redux.

Знакомство с редюсерами Redux

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

Так что же такое редуктор?

Редуктор — это функция JavaScript., редукторная функцияПринимает два параметра:Текущее состояниес однимaction(Мы расскажем больше о действиях в ближайшее время)

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

Вот почему редукторы должны быть чистыми функциями, чистая функция — это функция, которая всегда возвращает один и тот же результат для заданного ввода.

Редуктор создать несложно, это просто функция JavaScript с двумя аргументами.

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

Создайте каталог для корневого редуктора

mkdir -p src/js/reducers

затем вsrc/js/reducersсоздатьindex.jsдокумент

// src/js/reducers/index.js
const initialState = {
  articles: []
};
function rootReducer(state = initialState, action) {
  return state;
};
export default rootReducer;

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

Обратите внимание, как начальное состояние передается как параметр по умолчанию.

В следующих главах мы добавим к нему действие, где все станет интереснее.

Знакомство с действиями Redux

Нет никаких сомнений в том, что редукторы — самая важная концепция Redux**, редукторы создают состояние приложения**.

ноКак редюсер узнает, когда создавать следующее состояние??

Второй принцип Redux заключается в том, чтоЕдинственный способ изменить состояние — отправить сигнал в хранилище, этот сигнал является действием,действие отправкиэто процесс отправки сигнала

Теперь, как изменить неизменяемое состояние, вы не можете этого сделать, вновь сгенерированное состояние является копией текущего состояния после добавления новых данных, предыдущее состояние вообще не изменилось

Вот что вам нужно знать

Чтобы понять,Действия Redux — это просто объекты JavaScript., следующее действие

{
  type: 'ADD_ARTICLE',
  payload: { title: 'React Redux Tutorial', id: 1 }
}

Для каждого действия требуется атрибут типаописать, как меняется состояние

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

Лучшая практикаОберните каждое действие в функцию, эта функция называетсяaction creator

Теперь, создав простое действие Redux, мы можем собрать все воедино.

Создайте каталог для действий

mkdir -p src/js/actions

Затем создайте файл index.js в этом каталоге.

// src/js/actions/index.js
export function addArticle(payload) {
  return { type: "ADD_ARTICLE", payload }
};

Атрибут type — это просто строка

Редуктор будет использовать эту строку, чтобы определить, как вычислить следующее состояние.

Поскольку строки склонны к опечаткам и повторениям, поэтомуТип действия лучше объявить константным

Таким образом, вы можетеИзбегайте трудно отлаживаемых ошибок

Создать новый каталог

mkdir -p src/js/constants

Затем создайте файл action-types.js в этом каталоге.

// src/js/constants/action-types.js
export const ADD_ARTICLE = "ADD_ARTICLE";

Открой сейчасsrc/js/actions/index.jsи используйте типы действий для обновления действия

import { ADD_ARTICLE } from "../constants/action-types";
export function addArticle(payload) {
  return { type: ADD_ARTICLE, payload };
}

Мы на шаг ближе к работающему Redux-приложению, давайте проведем рефакторинг нашего редуктора!

---

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

Прикрепите оригинальную ссылкуwww.valentinog.com/blog/redux/