Рубрики
Без рубрики

Redux для начинающих – Узнайте основные основы Redux с примерами кода

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

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

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

Таким образом, в этой статье мы рассмотрим основы Redux и как его использовать.

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

Что такое redux?

Redux – это государственная библиотека управления, которая поможет вам лучше управлять состоянием в ваших приложениях.

Библиотека Redux не специфична для реагирования. Это библиотека, которую вы можете использовать в любой другой библиотеке или структуре, такой как угловой, Vue и даже Vanilla JavaScript.

Но разработчики в основном используют Redux при работе с реагированием.

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

Как начать с redux

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

Выполните следующую команду в командной строке Terminal/Command для создания нового проекта RACT, используя Create-React-App:

npx create-react-app redux-demo

После того, как вы создали проект, удалите все файлы из SRC Папка и создать новый файл index.js внутри SRC папка.

Теперь снова откройте терминал и выполните следующую команду из Redux-Demo папка:

npm install redux@4.1.0

Вышеуказанная команда установит библиотеку Redux с версией 4.1.0 Для использования в вашем проекте (который является последней версией на момент написания этой статьи).

Как создать магазин Redux

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

Чтобы создать магазин, нам нужно импортировать Createstore Функция такая:

import { createStore } from 'redux';

Createstore Функция принимает три аргумента:

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

Посмотрите на следующий код:

import { createStore } from 'redux';

const reducer = (state, action) => {
  console.log('reducer called');
  return state;
};

const store = createStore(reducer, 0);

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

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

Затем мы передаем эту функцию редуктора к Createstore Функция как первый аргумент и 0 как начальное значение состояния в качестве второго аргумента.

Createstore Функция возвращает магазин, который мы можем использовать для управления данными приложения.

Функция редуктора получает состояние и действие в качестве параметров.

Начальное значение состояния, которое мы прошли как 0 для Createstore Функция автоматически передается как значение Государство параметр.

Но это гораздо более распространенная практика для инициализации состояния внутри самого редуктора, а не передавать его как второй аргумент для Createstore Функция такая:

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  console.log('reducer called');
  return state;
};

const store = createStore(reducer);

Здесь мы используем синтаксис параметра ES6 по умолчанию для инициализации параметра состояния для значения 0 Отказ

Как только магазин создан, мы можем использовать Подписаться Способ, предоставленный магазином, чтобы подписаться на изменения в магазине, как показано ниже:

store.subscribe(() => {
  console.log('current state', store.getState());
});

Здесь, используя Подписаться Функция, мы регистрируем функцию обратного вызова, которая будет называться, когда хранилище будет изменен.

А внутри функции обратного вызова мы называем Store.getState Способ получения текущего значения состояния.

Теперь откройте SRC/index.js Файл и добавьте следующее содержимое внутри него:

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  console.log('reducer called');
  return state;
};

const store = createStore(reducer);

store.subscribe(() => {
  console.log('current state', store.getState());
});

Теперь, если вы запускаете приложение, выполняя NPM начать Команда с терминала и доступа http://localhost: 3000/ Вы увидите Редуктор под названием Сообщение напечатано в консоли.

Это потому, что редуктор немедленно вызывается, как только мы передам его на Createstore функция.

Как изменить магазин

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

Единственный способ изменить магазин – это диспетчеринговые действия.

Действие – это объект, отправленный в магазин, как это:

store.dispatch({
  type: 'INCREMENT'
})

Здесь мы называем функцию отправки доступной на магазин Чтобы отправить действие с типом Увеличение в магазин.

Функция отправки принимает объект в качестве параметра, который известен как действие.

Действие должно быть Тип свойство, как показано выше. Если вы не пройдете Тип Недвижимость, затем вы получите ошибку.

Тип может быть любая операция, которую вы хотите выполнить, как Add_user , Delete_record , Get_users и так далее.

Если у вас есть несколько слов, вы можете разделить их с подчеркиванием, как этот {Тип: 'increment_number'} Отказ

Теперь откройте index.js Файл и замените его содержимое в следующий код:

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  if (action.type === 'INCREMENT') {
    return state + 1;
  } else if (action.type === 'DECREMENT') {
    return state - 1;
  }

  return state;
};

const store = createStore(reducer);

store.subscribe(() => {
  console.log('current state', store.getState());
});

store.dispatch({
  type: 'INCREMENT'
});

store.dispatch({
  type: 'INCREMENT'
});

store.dispatch({
  type: 'DECREMENT'
});

Теперь, если вы запускаете приложение, выполняя NPM начать Команда с терминала, вы увидите следующие журналы, напечатанные в консоли:

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

В приведенном выше коде наша функция редуктора выглядит так:

const reducer = (state = 0, action) => {
  if (action.type === 'INCREMENT') {
    return state + 1;
  } else if (action.type === 'DECREMENT') {
    return state - 1;
  }

  return state;
};

Всякий раз, когда мы называем store.dispatch Функция, функция редуктора будет вызываться. Все, что возвращается из редуктора, станет новой стоимостью магазина.

Поэтому в первый раз мы отправляем действие в такой магазин, как это:

store.dispatch({
  type: 'INCREMENT'
});

Первое, если будет выполнено состояние внутри функции редуктора. Это увеличится Государство Значение для 1 который был изначально инициализирован на 0 Используя синтаксис параметра параметра ES6 по умолчанию. Тогда он будет возвращен из функции редуктора.

Обратите внимание, что мы используем значение штат рассчитать новое значение, и мы не модифицируем оригинал штат Значение, как это:

if (action.type === 'INCREMENT') {
   state = state + 1;
   return state;
}

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

И потому что мы добавили Store.subscribe Функция в index.js Файл, мы получаем уведомление о смене магазина, поскольку мы можем увидеть журналы в консоли.

Поэтому, когда мы снова называем отправку с помощью типа Увеличение Первое, если состояние будет выполнено снова. Итак, это добавит 1 к предыдущему состоянию, которое было 1, и значение окончательного состояния станет 2.

Тогда мы отправляем Уменьшение Действие в магазине, как это:

store.dispatch({
  type: 'DECREMENT'
});

который будет выполнять остальное состояние внутри редуктора, и он будет уменьшить значение состояния на 1 (SO 2 – 1 станет 1).

Обратите внимание, что внутри редуктора мы также возвращаем состояние в конце. Так Если ни одно из условий не совпадает, предыдущее состояние по умолчанию будет возвращено из функции.

Это обычная практика для использования оператора коммутатора внутри редуктора вместо этого условия IF-ELVE, как это:

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

В дополнение к типу мы также можем пройти дополнительную информацию как часть действия.

Заменить содержимое index.js Файл со следующим кодом:

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload;
    case 'DECREMENT':
      return state - action.payload;
    default:
      return state;
  }
};

const store = createStore(reducer);

store.subscribe(() => {
  console.log('current state', store.getState());
});

store.dispatch({
  type: 'INCREMENT',
  payload: 1
});

store.dispatch({
  type: 'INCREMENT',
  payload: 5
});

store.dispatch({
  type: 'DECREMENT',
  payload: 2
});

Теперь, если вы запускаете приложение, выполняя NPM начать Команда с терминала, вы увидите следующие журналы, напечатанные в консоли:

Здесь, при рассмотрении действия в магазин, мы передаем полезная нагрузка С каким-то значением, которое мы используем внутри редуктора, чтобы увеличить или уменьшить значение хранилища.

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

Наша функция редуктора выглядит так, как сейчас:

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload;
    case 'DECREMENT':
      return state - action.payload;
    default:
      return state;
  }
};

Поэтому, когда мы отправляем действия с типом Увеличение нравится:

store.dispatch({
  type: 'INCREMENT',
  payload: 1
});

store.dispatch({
  type: 'INCREMENT',
  payload: 5
});

Следующий код из редуктора будет выполнен:

return state + action.payload;

Это сначала добавит 1, а затем 5 до предыдущего значения состояния, поэтому мы идем от 1 до 6. И из-за Уменьшение Тип действия:

store.dispatch({
  type: 'DECREMENT',
  payload: 2
});

Мы идем от 6 до 4. Таким образом, окончательная стоимость магазина станет 4.

Вот a Код Sandbox Demo Отказ

Спасибо за прочтение!

Это было быстровое введение в Redux из моего Овладение Redux курс. Если вы хотите подробно узнать Redux и создадите полное приложение для заказа на еду, вы можете проверить это.

В ходе вы узнаете:

  • Базовый и продвинутый redux
  • Как управлять сложным состоянием массива и объектов
  • Как использовать несколько редукторов для управления сложным состоянием Redux
  • Как отладки приложения redux
  • Как использовать Redux в реакции, используя библиотеку React-redux, чтобы сделать ваше приложение реагировать.
  • Как использовать библиотеку Redux-Thunk для обработки Async API вызовы

и многое другое.

Наконец мы построим полную Приложение для заказа на еду С нуля с интеграцией полосы для принятия платежей и развертываем его до производства.

Вы можете получить курс всего за 12 долларов вместо первоначальной цены 19 долларов вместе с бесплатной копией моего популярного Овладение современным JavaScript Книга, если вы приобретете к 19 мая 2021 года.

Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn Отказ

Оригинал: “https://www.freecodecamp.org/news/redux-for-beginners/”

Читайте ещё по теме: