Автор оригинала: Rajjeet Phull.

Не было времени? Клонировать репо и пойти!

git clone https://github.com/rajjeet/react-playbook
cd react-playbook/packages/react-redux
npm install
npm start

Предыдущий пост

Проверьте этот пост для настройки реагирования, если вы начинаете свежие.

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

Шаг 1: Импортировать пакеты Redux NPM

npm install redux react-redux

Шаг 2: Создайте редуктор

Редуктор – это чистая функция, которая принимает 2 параметра: состояние и действие. Состояние может быть чем угодно, включая объекты. Действие – это объект с Тип Свойство, которое определяет тип действия в виде строки. Давайте создадим Сортирью в SRC/index.js.

SRC/index.js.

const countReducer = function (state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

Состояние инициализируется как 0 (когда приложение начинается). Мы обрабатываем 3 типа действий, причем корпус по умолчанию возвращает исходное состояние без изменений. Два других случая изменяют значение состояния и возвращают его как «новое» состояние (это важно для техники для Непомышленность Когда государство является объектом).

Шаг 2: Создайте магазин Redux

В магазине хранится состояние как один большой глобальный объект, известный как дерево штата. Магазин позволяет нам: – Отправка Действия по модификации состояния – Подписаться Чтобы получить уведомление о государственных изменениях – Восстановить все государственное дерево Давайте импортируем и создам магазин Redux и используйте наш редуктор, чтобы инициализировать его:

SRC/index.js.

...
import { createStore } from 'redux';
...
let store = createStore(countReducer);
...

В нашем случае все государственное дерево – это всего лишь один редуктор. Ничего сложно. Мы узнаем, как создавать более сложное государственное дерево в более поздних уроках.

Шаг 3: Оберните основной компонент приложения с провайдером

Теперь мы будем подключаться redux к реагировать Использование библиотеки NPM React-redux Отказ Давайте импортируем и оберните наш основной компонент приложений с ним. Кроме того, пропустите наши ранее созданные магазин в магазин опоры.

SRC/index.js.

...
import { Provider } from 'react-redux';
...
const App = () => (
  
    
Helloworld React & Redux!
  
);
ReactDOM.render(, document.getElementById('root'));

приложит все наше составное дерево с глобальным деревом штата.

Шаг 4: Создайте и подключите компонент контейнера

В мире React & Redux, Контейнерные (умные) компоненты несут ответственность за вытягивание штата из магазина Redux, преобразуя его и передавая его до Презентационные (тупые) компоненты Отказ Давайте конвертим наше

SRC/index.js.

...
import { Provider, connect } from 'react-redux';
...
const Component = () => 
Helloworld React & Redux!
;

const Container = connect()(Component);

const App = () => (
  
    
  
);
...

Мы импортируем функцию Connect из React-redux Отказ Мы рефикторуем наш оригинал

Шаг 5: Выберите и преобразоруйте состояние из Store Redux

Давайте использовать наши Контейнер Компонент для выбора состояния и, необязательно, преобразовать его.

SRC/index.js.

...
const mapStateToProps = state => {
  return {
    count: state
  };
};
const Container = connect(mapStateToProps)(Component);
...

Здесь мы определяем новую функцию под названием MapstatetoProps что буквально Карты Или связывает состояние из магазина Redux в компонентные реквизиты, которые мы хотим перейти к нашему нижестоятельному компоненту. В этом случае мы преобразуем состояние (что это всего лишь число от Соревнований ) для призыва под названием Считать Отказ Мы должны делать какие-либо необходимые преобразования здесь.

Шаг 6: Используйте состояние в презентационном компоненте

Считать Проп сейчас передается нашему Компонент Отказ Давайте объявим его как наш параметр и добавьте его в JSX. Болеть ответственность за Предметующая компонент состоит в том, чтобы преобразовать реквизиты в JSX мало или без логики.

SRC/index.js.

const Component = ({count}) => 
Helloworld React & Redux! {count}
;

Обновить страницу, и теперь вы должны увидеть 0 рядом с заголовком. Мы получаем государство из магазина Redux сейчас! Но как мы это меняем? Дайте взглянуть на действия.

Шаг 7: Добавить кнопки на нашу презентационную компонент

Теперь мы собираемся добавить две кнопки в нашем Предметующая компонент Это увеличивается и уменьшает количество.

SRC/index.js.

const Component = ({count, handleIncrementClick, handleDecrementClick}) => (
  

    
Helloworld React & Redux! {count}
    Decrement
    Increment
  
);

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

Шаг 8: Передайте обратный вызов, который отправляет действия для хранения

Пришло время сопоставить нашу отправку магазина до функций обратного вызова. Вот изменение:

SRC/index.js.

const mapDispatchToProps = dispatch => {
  return {
    handleIncrementClick: () => dispatch({ type: 'INCREMENT' }),
    handleDecrementClick: () => dispatch({type: 'DECREMENT'})
  }
};
const Container = connect(mapStateToProps, mapDispatchToProps)(Component);

Мы проходим вторую функцию под названием mapdispatchtopops нашему соединить Функция в Контейнер составная часть. Эта функция отображает Отправка Функция из магазина redux к зарегистрированным обратным вызовам. Эти обратные вызовы называются свойством возврата объекта объекта и передаются в нижний компонент в качестве реквизита ( HandleInCrementClick и HandledEcrementCrementClick ). Теперь он должен работать! Мы можем изменить состояние, используя кнопки!

Шаг 9 (необязательно): Refactor код

Давайте переместим аналогичный код в отдельные файлы для хранения проекта TIDY и поддерживаемым. Давайте создадим отдельный файл для Контейнер Компонент, Презентационный Компонент, инициализация хранения и редуктор. Также давайте поставим все счетчик Код в один каталог, поскольку, поскольку проект растет, мы создадим другие компоненты со своими собственными редукторами, контейнерами и презентационными компонентами. Окончательная структура каталогов должна выглядеть так:

src
├── configure-store.js
├── counter
│   ├── component.js
│   ├── container.js
│   └── reducer.js
├── index.html
└── index.js

И вот код в каждом файле:

SRC/Counter/Component.js

import React from 'react';

export const Component = ({ count, handleIncrementClick, handleDecrementClick }) => (
  

    
Helloworld React & Redux! {count}
    Decrement
    Increment
  
);

SRC/Counter/Container.js

import { connect } from 'react-redux';
import { Component } from './component';

const mapStateToPros = state => {
  return {
    count: state
  };
};
const mapDispatchToProps = dispatch => {
  return {
    handleIncrementClick: () => dispatch({ type: 'INCREMENT' }),
    handleDecrementClick: () => dispatch({ type: 'DECREMENT' })
  }
};
export const Container = connect(mapStateToProps, mapDispatchToProps)(Component);

SRC/Counter/Reeder.js

export const countReducer = function (state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

SRC/Configure-Store.js

import { createStore } from 'redux';
import { countReducer } from './counter/reducer';

export const store = createStore(countReducer);

SRC/index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './configure-store';
import { Container } from './counter/container';

const App = () => (
  
    
  
);

ReactDOM.render(, document.getElementById('root'));

Заключение

Спасибо за прочтение. Оформить заказ Код на моем Github. Если у вас есть предложения или хотите обсудить, оставьте комментарий здесь!