Введение в Redux (Action, Reducers и Store)

Опубликовано: 18 Декабря, 2021

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

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

Прежде чем мы погрузимся в Redux, мы должны знать о некоторых важных принципах redux. Есть три принципа Redux:

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

Строительные части редукса:

Действие
Редуктор
Магазин

Действия: Действия - это простой объект JavaScript, содержащий информацию. Действия - единственный источник информации для магазина. Действия имеют поле типа, которое сообщает, какое действие нужно выполнить, а все остальные поля содержат информацию или данные. И есть еще один термин, называемый « Создатели действий» , это функция, которая создает действия. Таким образом, действия - это информация (объекты), а создатель действий - это функции, которые возвращают эти действия.

Пример: Самый простой пример, который мы можем взять, - это «Дело». Итак, мы создадим двух создателей действий: один для добавления задачи в список дел и для удаления.

 function addTask(task) {
   
  return {
     
    type: 'ADD_TODO' ,
    task: task
  }
 }
 
function removeTask(task) {
  
  return {
    type: 'REMOVE_TODO' ,
    task: task
  }
 }

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

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

Давайте создадим редуктор для нашей задачи.
Пример:

 function task(tasks = [], action) {
   
  if (action.type === 'ADD_TODO' ) {
    return [...tasks, action.task];
  } else if (action.type === 'REMOVE_TODO' ) {
      return tasks.filter(task => task !== action.task);
    }
  return tasks;
 }

Итак, в приведенном выше редукторе функция, созданная с двумя аргументами, сначала является текущим состоянием, а затем - действием, которое мы хотим выполнить. Сначала инициализируйте пустой массив текущего состояния, потому что сначала список задач будет пустым.
Затем проверьте тип действия, разные типы действий будут иметь разную функциональность.В приведенном выше случае, если задача добавлена, он возвращает массив, содержащий более старый список задач и с одним добавленным новым, но более старое состояние не будет изменять более старое. заявляют, что мы вернем новый, это нужно иметь в виду. То же самое и для удаления, если ничего из вышеперечисленного нет, просто верните список. Вернуть новое состояние, никогда не изменять старое состояние.
Для более сложных приложений используйте combReducers (), чтобы объединить их и передать в хранилище.

Хранилище: Хранилище - это объект, который хранит состояние приложения.

Функции, связанные с Магазином:

createStore () - Для создания магазина
dispatch (действие) -Для изменения состояния
getState () - для получения текущего состояния магазина.

Пример: давайте создадим магазин для наших дел.

 import { createStore } from 'Redux' ;
 
// Creating store
 const store = createStore(taskList);
 
// Here add is action as you can see console,
 // its an object with some info
 const add = addTask( 'Wake up' );
 console.log(add);
 
// Dispatch usually trigger reducer and preform task
 store.dispatch(add);
 
// getState() function is used to get current state
 console.log(store.getState());
 
store.dispatch(addTask( 'Study' ));
 store.dispatch(addTask( 'Eat' ));
 store.dispatch(addTask( 'Go to sleep' ));
 store.dispatch(removeTask( 'Eat' ));
 store.dispatch(addTask( 'Work' ));
 store.dispatch(addTask( 'Sleep' ));
 store.dispatch(removeTask( 'Sleep' ));
 
console.log(store.getState());

Введение в Redux (Action, Reducers и Store)

РЕКОМЕНДУЕМЫЕ СТАТЬИ