index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="reveal/css/reveal.css">
    <link rel="stylesheet" href="reveal/css/theme/kontur-light.css" id="theme">
    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="reveal/css/highlight/idea-for-light.css">
    <link rel="stylesheet" href="reveal/css/highlight/darkula-for-dark.css">
    <!--[if lt IE 9]>
    <script src="reveal/js/html5shiv.js"></script>
    <![endif]-->
	<script defer src="reveal/js/head.min.js"></script>
	<script defer src="reveal/js/reveal.js"></script>
	<script defer src="reveal/initialize.js"></script>
	<script defer src="reveal/js/d3.min.js"></script>

	<style>
		.fragment-container {
			position: relative;
		}

		.fragment-container .fragment {
			position: absolute;
			top: 0px;
			width: 100%;
		}

		.tools.tools {
			margin: -30% auto 0;
			height: 100vh;
			display: block;
		}

		.slides .center {
			text-align: center;
		}

		.slides .comparison {
			display: flex;
			justify-content: space-between
		}
	</style>

	<title>Redux</title>
</head>
<body>

<div class="reveal"><div class="slides">

<section data-markdown><script type="text/template">

# Redux

<p class="center"><a href="https://github.com/kontur-web-courses/redux">https://github.com/kontur-web-courses/<b>redux</b></a></p>

</script></section>

<section data-markdown><script type="text/template">

## Сначала самое ~~долгое~~ важное

Скачиваем все необходимые пакеты Node.js:
```
cd tasks
npm ci
```

Затем запусти dev-сервер, чтобы видеть результаты решений заданий:
```cmd
npm start
```

Посмотреть можно будет на <a href="http://localhost:8080">http://localhost:8080</a>

Перестроение автоматическое, пока работает dev-сервер

***

### Расположение заданий и примеров

Для выполнения заданий папку `/tasks` надо
открыть в редакторе кода

В презентации пути указаны от папки: `/tasks/src`

Расположение заданий:
- Папка заданий: `~/{#.Папка}/`
- Примеры: `~/{#.Папка}/samples/`
- Формулировка задания: `~/{#.Папка}/{#.ИмяЗадания}.md`

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 1. Единый state приложения

***

### Lifting state ~~up~~ out

<img src="assets/redux-state.png">

Мотивация:
- Несколько компонентов зависят от одних данных
- Взаимодействующие компоненты в разных частях дерева

***

### Три принципа Redux

1. Единственный источник правды
2. Состояние доступно только на чтение
3. Изменения вносятся чистыми функциями

Мотивация:
- Контроль целостности в больших приложениях
- Изменения состояния можно протестировать модульно

> *Неизменяемый объект (immutable object)* — объект, состояние которого не может быть изменено после создания.
> *Чистая функция (pure function)* — это функция без побочных эффектов, ее результат полностью определяется аргументами

***

### Как вытащить состояние из компонентов?

***

### Цикл изменения состояния компонента

<img width="600px" src="assets/react-cycle.png">

***

### Цикл изменения состояния в Redux

<img width="600px" src="assets/redux-cycle.png">

***

### Выделим состояние простого приложения

<div class="center"><img width="300px" src="assets/sandglass-start.png"></div>

***

### Код главного компонента

```js
class App extends React.Component {
  state = { seconds: 15 };

  handleDecrease = () => {
    this.setState(prevState => ({ seconds: prevState.seconds - 1 }));
  };
  handleIncrease = () => {
    this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
  };

  render() {
    return (<Timer seconds={this.state.seconds}
      onDecrease={this.handleDecrease} onIncrease={this.handleIncrease}/>
    );
  }
}
```

Код полностью: `~/1.Sandglass/samples/sample1.component.js`

***

### Важен код, в котором меняется состояние

```js
class App extends React.Component {
  state = { seconds: 15 }; // задается начальное состояние

  handleDecrease = () => {
    // состояние меняется
    this.setState(prevState => ({ seconds: prevState.seconds - 1 }));
  };
  handleIncrease = () => {
    // состояние меняется
    this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
  };
  ...
}
```

***

### dispatch

Выделим код, в котором меняется состояние
в отдельную функцию, назовем ее `dispatch`

```js
class App extends React.Component {
  state = { seconds: 15 }; // задается начальное состояние

  dispatch(action) {
    // состояние меняется
    this.setState(prevState => prevState.seconds + action.value);
  }

  handleDecrease = () => this.dispatch({ value: -1 });
  handleIncrease = () => this.dispatch({ value: 1 });
  ...
}
```

Теперь все изменения происходят в одном месте

***

### Reducer

Это чистая функция, которая:
- создает начальное состояние
- определяет как обновляется состояние

***

### Выделим обновление состояния в reducer

```js
// Обновление состояния в dispatch:
this.setState(prevState => prevState.seconds + action.value); // до
this.setState(prevState => timerReducer(prevState, action)); // после

// Задание начального состояния:
state = { seconds: 15 }; // до
state = timerReducer(undefined, {}); // после

// Тогда структура reducer:
const timerReducer = (state, action) => {
    ...
	return newState;
};
```

***

### Тогда код reducer

```js
const timerReducer = (state = { seconds: 15 }, action) => {
  switch (action.type) {
    case 'CHANGE_SECONDS':
      return { seconds: state.seconds + action.value };
    default:
      return state;
  }
};
```

***

### Создание начального состояния
Состояние инициализируется за счет значения по умолчанию аргумента `state` и возвращается в ветке `default`,
ведь `action = {}`:
```js
const timerReducer = (state = { seconds: 15 }, ...) => {
  ...
    default:
      return state;
  ...
}
```

***

### Обновление состояния
Reducer обязан вернуть актуальное состояние:
1. Если `action` не влияет на состояние, то должно вернуться старое
2. Но если `action` должен повлиять на состояние, то создается и возвращается новый объект состояния с необходимыми изменениями. Старый объект состояния не меняется
```js
    case 'CHANGE_SECONDS':
      return { seconds: state.seconds + action.value };
    default:
      return state;
```

***

### Реагирование на разные действия

Строка `action.type` позволяет обрабатывать разные действия, изменяющие состояние

```js
   switch (action.type) {
     case 'CHANGE_SECONDS': ...
     default: ...
  }
```

***

### Чистота и иммутабельность

```js
const timerReducer = (state = { seconds: 15 }, action) => {
  switch (action.type) {
    case 'CHANGE_SECONDS':
      return { seconds: state.seconds + action.value };
    default:
      return state;
  }
}
```

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

Reducer при изменениях создает новое состояние, таким образом состояние доступно только на чтение и удовлетворяет паттерну *immutable object*.

***

### Использование reducer

```js
class App extends React.Component {
  state = timerReducer(undefined, {}); // задается начальное состояние

  dispatch(action) {
    // состояние меняется
    this.setState(prevState => timerReducer(prevState, action));
  }

  handleDecrease = () => this.dispatch({ type: 'CHANGE_SECONDS', value: -1 });
  handleIncrease = () => this.dispatch({ type: 'CHANGE_SECONDS', value: 1 });
  ...
}
```

Код полностью: `~/1.Sandglass/samples/sample2.reducer.js`

***

### Отделим состояние приложения от React
1. `state` переносится за пределы компонента
2. Взаимодействие с объектом `state` скрывается
за обертку `store` с набором допустимых методов
3. `reducer`, определяющий правила изменения `state`
уже находится вне компонента!

***

### Store

Сущность, которая содержит методы:
- `getState` для получения текущего состояния
- `dispatch` для обработки изменений состояния
- `subscribe` для подписки на изменения состояния

Будем создавать с помощью специальной функции:
```js
const store = createStore(reducer);
```

***

### Получение состояния

```js
const createStore = reducer => {
  let state;

  const getState = () => state;

  return { getState };
};
```

***

### Обработка изменений

```js
const createStore = reducer => {
  let state;

  const getState = () => state;

  const dispatch = action => {
    // состояние меняется
    state = reducer(state, action);
  };

  dispatch({}); // задается начальное состояние

  return { getState, dispatch };
};
```

***

### Подписка на изменения

```js
const createStore = reducer => {
  let listeners = [];
  ...
  const dispatch = action => {
    state = reducer(state, action);
    // все подписчики уведомляются сразу после изменения состояния
    listeners.forEach(listener => listener());
  };
  const subscribe = listener => {
    listeners.push(listener);
    // функция отписки
    return () => { listeners = listeners.filter(item => item !== listener); };
  };
  ...
  return { getState, dispatch, subscribe };
};
```

***

### Передача store в React

```js
const appStore = createStore(timerReducer);

ReactDom.render(<App store={appStore} />, document.getElementById('app'));
```

***

### Получение состояния

```js
class App extends React.Component {
  // начальное состояние просто берется из store
  state = this.props.store.getState();
  ...
}
```

***

### Обработка изменений

```js
class App extends React.Component {
  ...
  handleDecrease = () =>
    this.props.store.dispatch({ type: 'CHANGE_SECONDS', value: -1 });
  handleIncrease = () =>
    this.props.store.dispatch({ type: 'CHANGE_SECONDS', value: 1 });
  ...
}
```

***

### Подписка на изменения

```js
class App extends React.Component {
  ...
  componentDidMount() {
    this.props.store.subscribe(() => {
      // задается новое состояние компонента и происходит перерисовка
      this.setState(this.props.store.getState());
    });
  }
  ...
}
```

***

### Отписка от изменений

```js
class App extends React.Component {
  ...
  componentDidMount() {
    // subscribe возвращает функцию для отписки
    this.unsubscribe = this.props.store.subscribe(() => {
      this.setState(this.props.store.getState());
    });
  }
  componentWillUnmount() {
    // при удалении компонента можно отписаться
    this.unsubscribe && this.unsubscribe();
  }
  ...
}
```

***

Код полностью: `~/1.Sandglass/samples/sample3.store.js`

***

### Redux без React

Идея Redux о едином месте хранения состояния,
которое обновляется чистыми функциями, не привязана к React

Redux требуется только функция render,
чтобы отрисовывать view при изменении состояния

Эту функцию можно реализовать на DOM API

***

### Только функция render

```js
const appStore = createStore(timerReducer);
const handleDecrease = () =>
  appStore.dispatch({ type: 'CHANGE_SECONDS', value: -1 });
const handleIncrease = () =>
  appStore.dispatch({ type: 'CHANGE_SECONDS', value: 1 });

const render = () => {
  // React используется для отрисовки, но не отвечает за перерисовку
  ReactDom.render(
    (<Timer seconds={appStore.getState().seconds}
      onDecrease={handleDecrease} onIncrease={handleIncrease}/>),
    document.getElementById('app'));
}

appStore.subscribe(render); // перерисовка при изменениях
render(); // первоначальная отрисовка
```

Код полностью: `~/1.Sandglass/samples/sample4.render.js`

***

### Создание действий

```js
// action, действие
{ type: 'CHANGE_SECONDS', value }

// action creator, создатель действий
const changeSeconds = (value) => ({
  type: 'CHANGE_SECONDS',
  value
});

// позволяет использовать автодополнение при создании action
changeSeconds(5);
```

***

### Действия с payload

Параметры `action` часто объединяются
в один объект с ключом `payload`

```js
const changeSeconds = value => ({
  type: 'CHANGE_SECONDS',
  value // обычный вариант
});

const changeTime = (hour, minute, second) => ({
  type: 'CHANGE_TIME',
  payload: { // несколько параметров объединены
    hour,
    minute,
    second
  }
});
```

***

### Обработка payload

```js
const timerReducer = (state = { seconds: 15 }, action) => {
  switch (action.type) {
    case 'CHANGE_SECONDS':
      return { seconds: state.seconds + action.value };
    case 'CHANGE_TIME':
      // передаем payload для обработки в другую функцию
      return { seconds: state.seconds + getTotalSeconds(action.payload) };
    default:
      return state;
  }
};

const getTotalSeconds = ({ hour, minute, second }) => {
  return (hour * 60 + minute) * 60 + second;
};
```

***

### Унифицированная обработка payload

При унификации можно сделать деструктуризацию сразу,
а в функции-обработчики передавать `payload`, а не весь `action`
```js
const changeSeconds = (state, { value }) => ({
  seconds: state.seconds + value
});
const changeTime = (state, { hour, minute, second }) => ({
  seconds: state.seconds + (hour * 60 + minute) * 60 + second
});
export const timerReducer = (state = { seconds: 15 }, { type, payload }) => {
  switch (type) {
    case 'CHANGE_SECONDS':
      return changeSeconds(state, payload);
    case 'CHANGE_TIME':
      return changeTime(state, payload);
    default:
      return state;
  }
};
```

Код полностью: `~/1.Sandglass/samples/sample5.payload.js`

***

### Типы действий повторяются

```js
const changeSeconds = value => ({
  type: 'CHANGE_SECONDS',
  value
});

const timerReducer = (state = { seconds: 15 }, action) => {
  switch (action.type) {
    case 'CHANGE_SECONDS':
      return { seconds: state.seconds + action.value };
    default:
      return state;
  }
};
```

Легко сделать опечатку и код не будет работать!

***

### Выделение константы для типа действия

```js
const CHANGE_SECONDS = 'CHANGE_SECONDS';

const changeSeconds = value => ({
  type: CHANGE_SECONDS,
  value
});

const timerReducer = (state = { seconds: 15 }, action) => {
  switch (action.type) {
    case CHANGE_SECONDS:
      return { seconds: state.seconds + action.value };
    default:
      return state;
  }
};
```

Не обязательно для маленьких приложений, полезно в больших

Код полностью: `~/1.Sandglass/samples/sample6.action.js`

***

### Разделение по файлам

```js
// timerActionTypes.js
export const CHANGE_SECONDS = 'CHANGE_SECONDS';
```

```js
// timerActionCreators.js
import * as timerActionTypes from './timerActionTypes.js';
export const changeSeconds = value =>
  ({ type: timerActionTypes.CHANGE_SECONDS, value });
```

```js
// timerReducer.js
import * as timerActionTypes from './timerActionTypes.js';
export const timerReducer = (state = { seconds: 15 }, action) => {
  switch (action.type) {
    case timerConstants.CHANGE_SECONDS:
      return { seconds: state.seconds + action.value };
    ...
  }
}
```

Полезно для больших приложений с множеством reducer'ов

Код полностью: `~/1.Sandglass/samples/sample7.separated/`

***

### Переизобрели Redux

<img width="600px" src="assets/redux-cycle.png">

***

### Задание 1. Sandglass

***

### Выводы

1. Единственный источник правды
*store*
2. Состояние доступно только на чтение
*immutable state*
3. Изменения вносятся чистыми функциями
*reducer*

Корректность reducer можно проверять модульными тестами

***

Структура состояния приложения НЕ совпадает со структурой компонентов:
- Структура состояния определяется **предметной областью** и **идеей приложения**, а структура компонентов ее представлением
- Одна и та же часть состояния может использоваться многими компонентами
*как это делают Timer и Sandglass*
- Проектирование состояния вместе с написанием reducer
и создание компонентов для визуализации — две разные задачи
*reducer был полностью написан и протестирован, а уже затем подключен к визуальной части*

***

Связь `actions` и `reducer` через `dispatch` является слабой,
что открывает следующие возможности:
- Разные события меняют одну и ту же часть состояния
*changeSeconds и restart*
- Изменения состояния порождаются в разных частях приложения
*кнопки в Timer, кнопка для restart*
- Изменения состояния порождаются событиями вне React
*setInterval*
- Одно событие порождает изменения в разных частях состояния
*встретится далее*

***

### Redux — это компромисс

<img src="assets/not-need-redux.png">

С *Redux* будет больше кода,
но это оправдано для *больших приложений*,
которые пишут *большие команды*.

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.1. Redux для React
<div class="center">с провайдером и хуками</div>

***

### Передача store

Легко передать store в корневой компонент

```js
const appStore = createStore(reducer);

ReactDom.render(<App store={appStore} />, document.getElementById('app'));
```

Чтобы передать глубже придется пробрасывать через props?!

***

### Передача через Context

<img width="300px" src="assets/context.png">

Context может передать store на нужный уровень

***

### Идея передачи через Context

```js
const Context = React.createContext();
const store = createStore(reducer);

//App.js
function App() {
  return (<Context.Provider value={store}>
    <RootComponent />
  </Context.Provider>);
}

//ChildComponent.js
function ChildComponent() {
  const store = useContext(Context);
  return (...);
}
```

***

### Нюансы передачи через Context

1. Компонент-провайдер должен **подписаться** на&nbsp;store, чтобы уведомлять об&nbsp;изменениях
2. Компонент, который получает контекст, не&nbsp;зависит от&nbsp;всего состояния, значит нужен хук, который позволит **получать только нужные части состояния**
3. Компонент-провайдер следит за&nbsp;всеми изменениями store, но&nbsp;компоненты, которые получают контекст, должны **обновляться только при изменениях используемых частей состояния**
4. У&nbsp;компонентов должна быть возможность **вызвать действия** через dispatch

***

### Компонент Provider

```js
//App.js
function App({store}) {
  return (
    <Provider store={store}>
      <RootComponent />
    </Provider>
  );
}
```

***

### Хук useSelector()

```js
const result: any = useSelector(selector: Function, equalityFn?: Function);
```

Позволяет извлекать данные из store Redux с помощью функции `selector`

Здесь `equalityFn` - функция сравнения предыдущего результата функции `selector` и текущего значения. По умолчанию `useSelector()` использует строгую форму сравнения `===`

***

### Пример с useSelector()

```js
function App() {
  const seconds = useSelector((state) => state.seconds);

  return (<div className="app">
    <Timer seconds={seconds} />
  </div>);
}

ReactDom.render(
  <Provider store={appStore}>
    <App />
  </Provider>,
  document.getElementById("app")
);
```

***

### Хук useDispatch()

```js
const dispatch = useDispatch();
```

Этот хук возвращает ссылку на функцию `dispatch` из `store` Redux

***

### Пример с useDispatch()

```js
function App() {
  const seconds = useSelector((state) => state.seconds);
  const dispatch = useDispatch();

  const handleDecrease = () => dispatch(changeSeconds(-1));
  const handleIncrease = () => dispatch(changeSeconds(1));

  return (<div className="app">
    <Timer
      seconds={seconds}
      onDecrease={handleDecrease}
      onIncrease={handleIncrease}
    />
  </div>);
}
```

***

### Все уж готово

Реализовывать `Provider`, `useSelector()` и `useDispatch()` самостоятельно не нужно!

Их можно взять из пакета `react-redux`

***

### Устаревшее API connect()

```js
function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)
```

Функция connect() подключает компонент React к хранилищу Redux.

> `connect` still works and is supported in React-Redux 8.x.
> However, we recommend using the hooks API as the default.

***

### Пример с connect()

```js
// Настройка связи со store
const withStore = connect(
  (state, props) => ({
    seconds: state.seconds
  }),
  (dispatch, props) => ({
    onChange: value => dispatch(changeSeconds(value))
  })
);

// Создание компонента
const ConnectedTimer = withStore(Timer);
```
`connect` — это High Order Function, порождающая High Order Component

***

### Задание 2.1. Navigation

***

### Выводы
1. Компонент легко **подключается** к store
вне зависимости от своего положения в дереве компонентов
2. Компонент может **влиять** на любые другие компоненты
через store (Navigation на Pages)

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">
## 2.2. Коллекции

***

### Хранение сущностей в массиве

```js
const state = {
  products: [
    { id: 1, name: "Яблоко" },
	{ id: 2, name: "Апельсин" },
	{ id: 3, name: "Виноград" }
  ]
}
```

Возможный вариант, но что если...

***

### Нужно показывать выбранный элемент?

```js
const state = {
  products: [
    { id: 1, name: "Яблоко" },
	{ id: 2, name: "Апельсин" },
	{ id: 3, name: "Виноград" }
  ],
  currentProduct: { id: 2, name: "Апельсин" }
}
```
В диалоговом окне показывается подробная информация
о выбранном продукте

***

### Входит в состав другой сущности?

```js
const state = {
  products: [
    { id: 1, name: "Яблоко" },
	{ id: 2, name: "Апельсин" },
	{ id: 3, name: "Виноград" }
  ],
  purchases: [
	{ product: { id: 2, name: "Апельсин" }, quantity: 3}
  ]
}
```

При отображении покупки в интернет-магазине
надо показывать название продукта

***

### Нужно показывать выборку?

```js
const state = {
  products: [
    { id: 1, name: "Яблоко" },
	{ id: 2, name: "Апельсин" },
	{ id: 3, name: "Виноград" }
  ],
  chosenProducts: [
    { id: 1, name: "Яблоко" },
    { id: 2, name: "Апельсин" }
  ]
}
```

Пользователь добавил фильтр и временно надо показывать
только подходящие продукты

***

### Получаем перерасход памяти

```js
const state = {
  products: [
    { id: 1, name: "Яблоко" },
	{ id: 2, name: "Апельсин" },
	{ id: 3, name: "Виноград" }
  ],
  currentProduct: { id: 2, name: "Апельсин" },
  purchases: [
	{ product: { id: 2, name: "Апельсин" }, quantity: 3}
  ],
  chosenProducts: [
    { id: 1, name: "Яблоко" },
    { id: 2, name: "Апельсин" }
  ]
}
```

***

### При изменении нужно обновлять везде
```js
const state = {
  products: [
    { id: 1, name: "Яблоко" },
	{ id: 2, name: "МАНДАРИН" },
	{ id: 3, name: "Виноград" }
  ],
  currentProduct: { id: 2, name: "МАНДАРИН" },
  purchases: [
	{ product: { id: 2, name: "Апельсин" }, quantity: 3}
  ],
  chosenProducts: [
    { id: 1, name: "Яблоко" },
    { id: 2, name: "Апельсин" }
  ]
}
```

Изменили в диалоговом окне — мало обновить
исходную коллекцию

***

### Можно использовать идентификаторы

```js
const state = {
  products: [
    { id: 1, name: "Яблоко" },
	{ id: 2, name: "МАНДАРИН" },
	{ id: 3, name: "Виноград" }
  ],
  currentProductId: 2,
  purchases: [
	{ productId: 2, quantity: 3}
  ],
  chosenProductIds: [1, 2]
}
```

Лучше, но поиск по id в массиве продуктов неэффективен...

***

### Коллекция

```js
const state = {
  products: {
    allIds: [1, 2, 3],
	byId: {
	  1: { id: 1, name: "Яблоко" },
	  2: { id: 2, name: "МАНДАРИН" },
	  3: { id: 3, name: "Виноград" }
	}
  },
  currentProductId: 2,
  purchases: [
	{ productId: 2, quantity: 3}
  ],
  chosenProductIds: [1, 2]
}
```

Храним отдельно все идентификаторы и сами объекты

- Удобно изменять локально и обновлять с сервера
- Нет лишних данных

***

### Задание 2.2. Menu

***

### Выводы
1. Иногда, чтобы отобразить список компонентов, родительскому компоненту достаточно знать список идентификаторов
2. Коллекция позволяет подключать компоненты по идентификатору: все необходимые компоненту данные он достанет по идентификатору

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.3. Организация редьюсеров

***

### Слайсы

Будем называть *слайсом* часть состояния, которая является значением этого состояния для некоторого ключа

```js
const state = {
  page: 'menu',
  products: [{ id: 1, name: 'Блюдо' }]
};
```

В примере `page` — это один слайс, а `products` — это другой слайс

***

### Разделение действий по слайсам

```js
const rootReducer = (state = {}, action) => {
  switch (action.type) {
    case actionTypes.NAVIGATE_TO_PAGE:
      return { ...state, page: action.page };
    case actionTypes.LOAD_PRODUCTS:
      return { ...state, products: action.products};
  }
  return state;
}
```

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

Здесь `NAVIGATE_TO_PAGE` меняет слайс `page`,
а `LOAD_PRODUCTS` меняет слайс `products`

***

### Разделение обработки слайсов

```js
const pageReducer = (state = Page.menu, action) => {
  return action.type === actionTypes.NAVIGATE_TO_PAGE ? action.page : state;
};

const productsReducer = (state = [], action) => {
  return action.type === actionTypes.LOAD_PRODUCTS ? action.products : state;
};

const rootReducer = (state = {}, action) => {
  return {
    page: pageReducer(state.page, action),
    products: productsReducer(state.products, action)
  };
}
```

Каждый slice-редьюсер отвечает только за один кусочек состояния.
А `rootReducer` собирает его полностью

***

### Разделение обработки слайсов

Разделение на слайсы не освобождает от необходимости создавать тип и `action creator` для каждого действия

Note:
А действий может быть очень много.
Разработчики пытались решить эту проблему, создавая разные абстракции.
В этом разделе мы обсудим метод создания слайса, который рекомендован в официальной документации.

***

### Redux Toolkit

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

- Сложная настройка store
- Для того, чтобы заставить Redux делать что-то полезное, приходится использовать дополнительные пакеты
- Слишком много шаблонного кода (boilerplate)

***

### Redux Toolkit

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

Из документации Redux:
> Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app.

***

### Создание слайса с помощью createSlice

```js
import {createSlice} from '@reduxjs/toolkit';

const navigationSlice = createSlice({
  name: 'page',
  initialState: Page.menu,
  reducers: {
    navigateTo(state, action) {
      return action.payload;
    }
  }
});

export const { navigateTo } = navigationSlice.actions;
export const pageReducer = navigationSlice.reducer;
```

`createSlice()` автоматически генерирует slice-редьюсер, создателей действий (action creators) и типы действий (type), соответствующие редьюсерам и состоянию

Note:
"This API is the standard approach for writing Redux logic." - цитата из документации.

***

### Case-редьюсеры

```js
const navigationSlice = createSlice({
  name: 'page',
  initialState: Page.menu,
  reducers: {
    // case-редьюсер navigateTo
    navigateTo(state, action) {
      return action.payload;
    }
  }
});

export const { navigateTo } = navigationSlice.actions;
export const pageReducer = navigationSlice.reducer;
```

Case-редьюсер — это обработчик определенного типа действия. В коде выше задан один сase-редьюсер — `navigateTo`

***

### Генерация типов действий

```js
const navigationSlice = createSlice({
  name: 'page',
  initialState: Page.menu,
  reducers: {
    navigateTo(state, action) {
      return action.payload;
    }
  }
});

export const { navigateTo } = navigationSlice.actions;
export const pageReducer = navigationSlice.reducer;
```

`createSlice()` генерирует тип действия по следующему шаблону: значение параметра `name` для `createSlice` + `/` +  `name` сase-редьюсера

Для создателя действий `navigateTo()` тип будет `page/navigateTo`

***

### Генерация slice-редьюсера

```js
const navigationSlice = createSlice({
  name: 'page',
  initialState: Page.menu,
  reducers: {
    navigateTo(state, action) {
      return action.payload;
    }
  }
});

export const { navigateTo } = navigationSlice.actions;
export const pageReducer = navigationSlice.reducer;
```

`pageReducer` — это slice-редьюсер для `page`

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

***

### Сравнение старого и нового подхода

Без Redux Toolkit:
```js
const NAVIGATE_TO_PAGE = 'NAVIGATE_TO_PAGE';

export const navigateTo = page => ({
  type: NAVIGATE_TO_PAGE,
  page
});

const productsReducer = (state = [], action) => {
  return action.type === actionTypes.LOAD_PRODUCTS ? action.products : state;
};
```

***

### Сравнение старого и нового подхода

С Redux Toolkit:
```js
  const navigationSlice = createSlice({
    name: 'page',
    initialState: Page.menu,
    reducers: {
      navigateTo(state, action) {
        return action.payload;
      }
    }
  });

  export const { navigateTo } = navigationSlice.actions;
  export const pageReducer = navigationSlice.reducer;
```

***

### configureStore

Для создания `store` вместо `createStore` будем использовать `configureStore` из Redux Toolkit.

В качестве входного параметров функция `configureStore` принимает объект slice-редьюсеров `reducer`:

```js
import {configureStore} from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    page: pageReducer,
    products: productsReducer,
  },
});
```

Note:
configureStore помогает не писать логику объединения rootReducer
reducer - который автоматически комбинируется в `rootReducer`

***

### Структура приложения

<pre>
/src
  index.js
  App.js
  /app
    store.js: creates the Redux store instance
  /features
    /navigation
      navigationSlice.js
      /Navigation
        Navigation.css
        Navigation.js
</pre>

Для построения структуры приложения будем использовать подход `feature folders`

Note:
https://redux.js.org/style-guide/#structure-files-as-feature-folders-with-single-file-logic
Сам Redux не заботится о том, как структурированы папки и файлы вашего приложения.
Однако совместное размещение логики для данной функции в одном месте обычно облегчает поддержку этого кода.

Для большинства приложений рекомендуется структурировать файлы, используя подход "feature folder"
(все файлы для фичи в одной папке).

В директории фичи логика Redux для этой фичи должна быть записана в виде одного файла «слайса»,
предпочтительно с использованием Redux Toolkit createSlice API.

***

### Задание 2.3. Refactoring

***

### Выводы
1. `createSlice` позволяет автоматизировать создание action creators и slice-редьюсеров
2. В слайсах **проще обновлять состояние**,
ведь вложенность меньше на один уровень (встретится далее)
3. Как следствие, при проектировании состояния приложения
надо стремиться к **более плоской структуре состояния**,
к большему числу независимых слайсов

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.4. Middleware

***

### Обычный dispatch

<img width="600px" src="assets/middleware0.png">

***

### dispatch с middleware

<img width="600px" src="assets/middleware1.png">

*Middleware* — промежуточный слой

`dispatch` оборачивается другой функцией
и в обертке кладется в `store`

***

### Логирование

<img width="600px" src="assets/middleware-log.png">

***

### Измерение производительности

<img width="600px" src="assets/middleware-measure.png">

***

### Фильтрация по условию

<img width="600px" src="assets/middleware-filter.png">

***

### Вызов переданной функции

<img width="600px" src="assets/middleware-call.png">

***

### Простейшее middleware

```js
const customMiddleWare = ({ getState, dispatch }) => next => action => {
  return next(action);
};
```

1. `{ getState, dispatch }` передается при подключении к `store`
2. `next` обеспечивает композицию,
содержит базовый `dispatch` или следующий `middleware`
3. `action` — действие, которое надо обработать

***

### Более сложный пример

```js
// Отправляет отчеты об ошибках когда обновляется
// состояние и уведомляются слушатели.
const crashReporter = ({ getState, dispatch }) => next => action => {
  try {
    return next(action)
  } catch (err) {
    console.error('Caught an exception!', err)
    // Можно отправить логи на сервер
    throw err
  }
}
```

***

### Композиция middleware

<img width="600px" src="assets/middleware-compose1.png">

***

### Каждый middleware вызывает next

<img width="600px" src="assets/middleware-compose2.png">

***

### Каждому middleware доступно API от store

<img width="600px" src="assets/middleware-compose3.png">

***

### Подключение middleware

```js
export const store = configureStore({
  reducer: {
    page: pageReducer,
    products: productsReducer
  },
  preloadedState,
  middleware: [middleware1, middleware2, middleware3]
});
```

`action` будет проходить `middleware` в порядке 1, 2, 3
А результат будет выходить в порядке 3, 2, 1

Note:
В поле middleware можно передавать не только массив, но и callback функцию. Зачем это может понадобиться, разберем позже

***

### Задание 2.4. Logging

***

### Выводы

**Middleware — точка расширения для Redux**

Позволяет:
- Добавлять новые фичи в обработку действий
- Логировать все действия без модификации кода приложения
- и так далее

Middleware для многих задач уже написаны
А если нужно что-то специфическое — **легко написать свое!**


</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.5. Взаимодействие с API

***

### Действия при запросах

```js
function load() {
  // 1. Перед запросом
  api
    .fetchData()
    .then(data => {
      // 2. После запроса
    })
    .catch(reason => {
      // 3. Если что-то пошло не так
    });
}
```

Всегда есть три шага:
1. Показать, что загрузка началась, например, показать лоадер
2. Добавить данные, убрать лоадер, показать результат
3. Обработать ошибку, убрать лоадер, сообщить пользователю

***

### Версия с async/await

```js
async function loadAsync() {
  // 1. Перед запросом
  try {
    const data = await api.fetchData();
    // 2. После запроса
  } catch (error) {
    // 3. Если что-то пошло не так
  }
}
```

Всегда есть три шага:
1. Показать, что загрузка началась, например, показать лоадер
2. Добавить данные, убрать лоадер, показать результат
3. Обработать ошибку, убрать лоадер, сообщить пользователю

***

### Три действия

Есть три шага, значит надо три раза изменять `state` с помощью трех case-редьюсеров

```js
const productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    loadProductsRequest(state, action) {
      // 1. Перед запросом
    },
    loadProductsSuccess(state, action) {
      // 2. После запроса
    },
    loadProductsFailure(state, action) {
      // 3. Если что-то пошло не так
    }
  }
});
```

***

### Задание 2.5. Api

***

### Вывод
Запросы на сервер могут привести к трем изменениям в `store`

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.6. Immutability

***

### Mutable vs Immutable

```js
const person = {
  names: { surname: 'Ace', name: 'Frederic' },
  age: 26
};

// мутирующее обновление: изменения происходят в исходном объекте
person.age = 28;

// немутирующее обновление: создается копия всех измененных частей
const reagedPerson = { ...person, age: 27 };
// а значит person.names переиспользуется
```

***

### Зачем это нужно?

1. ?
2. ?

***

### Пункт 1

Обновление не ломает существующие объекты и компоненты:
- кто в курсе используют новое **согласованное состояние**
- кто не в курсе используют старое **согласованное состояние**

***

### Пункт 2

При обновлении внутри меняется родитель
<img width="800px" src="assets/immutable1.png">
<img width="800px" src="assets/immutable2.png">
Значит **совпадение ссылок гарантирует неизменность!**

***

### Как это делать?

***

### Простой случай

```js
const person = {
  names: { surname: 'Ace', name: 'Frederic' },
  age: 26
};

const reagedPerson = { ...person, age: 27 };
```

Действительно просто!

***

### Обновление вложенного  значения

```js
const person = {
  names: { surname: 'Ace', name: 'Frederic' },
  age: 26
};

// немутирующее обновление вложенного значения
const renamedPerson = {
  ...person,
  names: {
    ...person.names,
    surname: 'Potter'
  }
};
```
Более многословно, чем хотелось бы

***

### Обновление элемента массива

```js
const people = [
  { names: { surname: 'Westlake', name: 'Ronald' }, age: 42 },
  { names: { surname: 'Ace', name: 'Frederic' }, age: 26 }
];

const updatedPeople = people.map((person, index) =>
  index !== 1
    ? person
    : {
        ...person,
        age: 27
      }
);
```
Еще более многословно...

***

### Обновление вложенного значения элемента массива?! 0_o

***

### Можно попробовать пошагово...

```js
const person = people[1];
const renamedPerson = {
  ...person,
  names: {
    ...person.names,
    surname: 'Potter'
  }
};

const updatedPeople = people.map((person, index) =>
  index !== 1 ? person : renamedPerson
);
```

***

### Как обновлять без боли?

1. Избегать объектов с сильно вложенными значениями
В частности: `combineReducers`
2. Обновлять в несколько шагов
3. Написать вспомогательные функции
Примеры: `~/2.Sushi/samples/immutable-updates/`
4. Использовать сторонние библиотеки

***

### Написание вспомогательных функций

```js
function insertItem(array, index, item) {
  return [
    ...array.slice(0, index),
    item,
    ...array.slice(index)
  ];
}

function removeItem(array, index) {
  return array.filter((item, i) => i !== index);
}
```

```js
const peopleWithNewOne = insertItem(people, 3, newPerson);
const peopleWithoutSecond = removeItem(people, 2);
```

***

### Проблемы

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

***

### Immer в createSlice

Для упрощения написания немутирующих обновлений, `createSlice()` из Redux Toolkit использует библиотеку Immer

<p class="center">
  <img width="600px" src="assets/immer-logo.svg" style="margin: 0 auto;">
</p>

***

### Immer

<p class="center">
  <img src="assets/immer.png">
</p>

Immer создает черновик (Draft) объекта (Current), который мы хотим изменить. Далее мы пишем изменения Draft в **мутирующем виде**, а Immer возвращает новый (Next) безопасно обновленный в **немутирующем стиле** объект

***

### Обновление вложенного значения элемента массива

Используя Immer, вместо

```js
const person = people[1];
const renamedPerson = {
  ...person,
  names: {
    ...person.names,
    surname: 'Potter'
  }
};

const updatedPeople = people.map((person, index) =>
  index !== 1 ? person : renamedPerson
);
```

можно просто написать

```js
people[1].names.surname = 'Potter';
```

***

### Важно

- Логику изменения стейта в мутирующем стиле можно писать только внутри `createSlice()` Redux Toolkit, потому что он использует Immer
- Использование мутирующей логики в редьюсерах без Immer может привести к ошибкам

***

Пример написания case-редьюсера с использованием возможностей Immer:

```js
export const productsSlice = createSlice({
  name: "products",
  initialState: {
    allIds: [],
    byId: {},
    status: Status.none
  },
  reducers: {
    loadProductsRequest(state) {
      state.status = Status.loading;
    }
  }
});
```

***

При написании кода редьюсеров можно писать логику либо в мутирующем стиле без `return`, либо немутирующем стиле с `return`:
```js
loadProductsRequest(state) {
  return {
    ...state,
    status: Status.loading
  };
}
```
или
```js
loadProductsRequest(state) {
  state.status = Status.loading;
}
```

Нельзя использовать оба подхода сразу в рамках одного case-редьюсера

***

### В итоге immutable — не больно!

***

### Задание 2.6. TangledFilter

***

### Выводы
1. Обновлять состояние нужно в **immutable-стиле**, используя средства языка, специальные функции или сторонние библиотеки иначе работать не будет
2. Идеология Redux делает обновление нескольких компонентов, зависящих от одного значения, тривиальным

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.7. Thunk

***

### Происхождение термина

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

```js
// обычное значение
print(5 + 3);
// функция, возвращающая значение
print(() => 5 + 3);
```
Тогда, если значение не понадобится, его можно не вычислять

Можно сказать, что **значение было «задумано»**, но не посчитано

«Задумано» — «thought», 3-форма неправильного глагола «think»
В шутку или заведомо неправильно говорят «thunk»

**thunk** — это функция без параметров, которая вычисляет и возвращает значение

***

### Thunk Middleware в Redux

<img width="400px" src="assets/middleware-call.png">

Вместо `action` в `dispatch` передается функция,
которая при своем вызове будет вызывать `dispatch`
с нужными ей действиями

***

### Создатель действий для thunk

```js
// Action creator, создающий thunk
const sumAndChange = (a, b) => (dispatch, getState, extraArgument) => {
  dispatch({ type: 'CHANGE_VALUE', value: a + b });
}
// Dispatching с использованием action creator
dispatch(sumAndChange(3, 2));
// Thunk, который будет передан в dispatch со значениями из замыкания
const thunk = (dispatch, getState, extraArgument) => {
  dispatch({ type: 'CHANGE_VALUE', value: 3 + 2 });
};
```

***

### Реализация redux-thunk

```js
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
const thunk = createThunkMiddleware(); // версия без extraArgument
thunk.withExtraArgument = createThunkMiddleware; // для версии с extraArgument
export default thunk;
```

Нужен `dispatch` и он доступен

`dispatch` с `thunkMiddleware` возвращает результат
вызова функции, а не `action`, как делает обычный `dispatch`

Можно передать произвольное API через `extraArgument`

***

### Действия при запросах

```js
async function loadAsync() {
  // 1. Перед запросом
  try {
    const data = await api.fetchData();
    // 2. После запроса
  } catch (error) {
    // 3. Если что-то пошло не так
  }
}
```

Всегда есть три шага:
1. Показать, что загрузка началась, например, показать лоадер
2. Добавить данные, убрать лоадер, показать результат
3. Обработать ошибку, убрать лоадер, сообщить пользователю

***

### Три действия

Всегда есть три шага, значит надо три раза изменять state с помощью трех действий

Redux Toolkit предоставляет `createAsyncThunk` API, которое упрощает рутинную операцию создания действий

Note:
Однако это утомительно каждый раз создавать три обработчика, поэтому разработчика Redux создали API, который
упрощает эту рутинную операцию

***

### Создание thunk с createAsyncThunk

```js
import { createAsyncThunk } from "@reduxjs/toolkit";

const asyncThunk = createAsyncThunk("type", async (arg, thunkAPI) => {
  const { dispatch, extra, getState } = thunkAPI;
  // ...
  dispatch(someActionCreator(arg));
  // ...
  dispatch(someActionCreator1(arg));
  // ...
  const response = await extra.api.asyncRequest(getState().fieldFromState);
  return response.data;
});
```

`createAsyncThunk()` возвращает стандартный создатель действия thunk, а&nbsp;также три создателя действий для случаев `pending`, `fulfilled`, `rejected` в&nbsp;качестве вложенных полей

***

### Создание thunk с createAsyncThunk

```js
const asyncThunk = createAsyncThunk("type", async (arg, thunkAPI) => {
  // ...
});
```

createAsyncThunk сгенерирует четыре функции:
- asyncThunk — создатель действия thunk
  - `asyncThunk.pending` — создатель действия, который вызывается до `async (arg, thunkAPI) => {}`
  - `asyncThunk.fulfilled` — создатель действия, который вызывается при успешном выполнении `async (arg, thunkAPI) => {}`
  - `asyncThunk.rejected` — создатель действия, который вызывается при ошибке

Note:
Зачем нужны action creators "pending", "fulfilled" и "rejected" поговорим позже

***

### Параметры

```js
const asyncThunk = createAsyncThunk(type, payloadCreator);
```

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

***

### Параметр type

```js
const asyncThunk = createAsyncThunk(type, payloadCreator);
```

Параметр `type` используется в качестве префикса для генерации типов для `pending`, `fulfilled` и `rejected`. Например, если `type` равен "sliceName/action", то
- `asyncThunk.pending` будет иметь тип "sliceName/action/pending"
- `asyncThunk.fulfilled` будет иметь тип "sliceName/action/fulfilled"
- `asyncThunk.rejected` будет иметь тип "sliceName/action/rejected"

***

### Параметр payloadCreator

```js
(arg, thunkAPI) => {
  const { dispatch, extra, getState } = thunkAPI;
  dispatch(someActionCreator(arg));

  return extra.api.asyncRequest(getState().fieldFromState);
};
```

`payloadCreator` принимает два аргумента:
- `arg`: значение, содержащее первый параметр, который был передан создателю действия thunk при его отправке.
- `thunkAPI`: объект, содержащий поля:
  - `dispatch`: Redux `dispatch` метод
  - `getState`: метод получения `store` Redux
  - `extra`: extraArgument который передали в thunk при создании
  - ...

Note:
Например, в случае `dispatch(someActionCreator({arg1: 'argumentValue', arg2: 0}))`, `arg` будет `{arg1: 'argumentValue', arg2: 0}`.

***

### Редьюсеры и действия при запросах

`createAsyncThunk()` возвращает стандартный создатель действия thunk, а&nbsp;также три создателя действий для случаев `pending`, `fulfilled`, `rejected` в&nbsp;качестве вложенных полей

***

Но как передать обработку действий `pending`, `fulfilled`, `rejected` в слайс?

***

### Редьюсеры и действия при запросах

Для обработки внешних действий в слайсе предусмотренно поле `extraReducers`:

```js
const stateSlice = createSlice({
  name: 'stateSlice',
  initialState,
  extraReducers(builder) {
    builder
      .addCase(asyncThunk.pending, (state) => {
        // Обработка действия начала асинхронной операции
      })
      .addCase(asyncThunk.fulfilled, (state, {payload: productIds}) => {
        // Обработка действия успешного окончания асинхронной операции
      })
      .addCase(asyncThunk.rejected, (state) => {
        // Обработка действия при ошибке
      });
  }
});
```

Note:
  Нужно сказать, что сначала посмотрим пример, потом разберем, что происходит.
  Подробнее про builder далее.

***

### Редьюсеры и действия при запросах

```js
const stateSlice = createSlice({
  name: 'stateSlice',
  initialState,
  extraReducers(builder) {
    builder.addCase(actionCreator, (state, action) => {}))
  }
});
```

Объект `builder` предоставляет методы, которые позволяют определять дополнительные case-редьюсеры

Note:
  addCase не единственный метод билдера, остальные можно посмотреть в документации

***

### Подключение Thunk Middleware

***

### Использование getDefaultMiddleware

Функция `configureStore` умеет подключать некоторые `middleware` по умолчанию. В том числе и Thunk Middleware:

Для этого, в&nbsp;поле `middleware` нужно передать callback функцию, которая получит `getDefaultMiddleware` в&nbsp;качестве аргумента и&nbsp;должна вернуть массив `middleware`:

```js
export const store = configureStore({
  reducer: {/*...*/},
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware().concat(customMiddleWare, logger);
  }
});
```

***

### Конфигурирование middleware

`getDefaultMiddleware` может принимать объект для конфигурирования middleware.

Например, чтобы задать `extraArgument` в Thunk Middleware необходимо передать соответсвующую опцию в поле `thunk`:

```js
export const store = configureStore({
  reducer: {/*...*/},
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware({
      thunk: {
        extraArgument: {api}
      }
    }).concat(customMiddleWare, logger);
  }
});
```

***

### Список middleware по умолчанию

В режиме разработки:

```js
const middleware = [thunk, immutableStateInvariant, serializableStateInvariant]
```

- `immutableStateInvariant` — глубоко сравнивает значения `state` для отслеживания мутирующих изменений
- `serializableStateInvariant` — глубоко проверяет `state` и действия на наличие несериализуемых значений, таких как функции, Promises и т.д.

В продакшн:

```js
const middleware = [thunk]
```

***

### Функции-селекторы

Note:
  О функциях-селекторах необходимо знать, потому что они используются в задании

***

### Определение

Селекторы — это функции, которые принимают `state` Redux в качестве аргумента, выполняют некоторые манипуляции и возвращают данные

```js
const productIds = useSelector(getProductIds)
// ...
export function getProductIds(state) {
  return state.products.allIds;
}
```

Функции-селекторы могут выполнять более сложные преобразования данных

Note:
  Нужно обсудить понятие функций-селекторов потому, что участники курса с ними столкнуться в задании.

***

### Причины использования

- Чтобы не обращаться к стейту напрямую и не рафакторить компоненты каждый раз, когда изменяется формат данных
- Необходимо мемоизировать извлечение данных из `state`
- Необходимо переиспользовать данные в разных компонентах

***

### Расположение в коде

Код функций-селекторов обычно располагают рядом со слайсами, потому что они работают с одним и тем же состоянием

Note:
Если схема состояний изменяется, легче обновлять селекторы, чем обновлять компоненты

***

### Задание 2.7. UnstableFilter

***

### Выводы

**Thunk Middleware** позволяет:

- **Группировать вызовы** нескольких связанных действий
в одну функцию. Например, для выполнения запросов
- **Использовать Promise** в качестве возвращаемого значения
и дожидаться результата
- Передавать **произвольное API**

Использование `createAsyncThunk()` позволяет упростить генерацию действий при асинхронных операциях

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.8. Хук useSelector

***

### Нюансы передачи через Context

1. Компонент-провайдер должен **подписаться** на&nbsp;store, чтобы уведомлять об&nbsp;изменениях
2. Компонент, который получает контекст, не&nbsp;зависит от&nbsp;всего состояния, значит нужен хук, который позволит **получать только нужные части состояния**
3. Компонент-провайдер следит за&nbsp;всеми изменениями store, но&nbsp;компоненты, которые получают контекст, должны **обновляться только при изменениях используемых частей состояния**
4. У&nbsp;компонентов должна быть возможность **вызвать действия** через dispatch

***

### Хук useSelector()

```js
const result: any = useSelector(selector: Function, equalityFn?: Function);
```

Позволяет извлекать данные из store Redux с помощью функции `selector`

Здесь `equalityFn` - функция сравнения предыдущего результата функции `selector` и текущего значения. По умолчанию `useSelector()` использует строгую форму сравнения `===`

***

### Хук useSelector()

```js
const result = useSelector((state) => {a: state.a});
```

Если `selector` каждый раз будет возвращать новый объект, `useSelector()` будет вызывать повторный рендер при любом изменении `state`

***

### Вопрос

Что делать, если необходимо получить несколько значений из `store`?

***

### Варианты решения

- Можно вызвать `useSelector()` несколько раз, при этом каждый вызов должен вернуть одно значение поля из `state`
- Используйте Reselect или аналогичную библиотеку, чтобы создать мемоизированный селектор
- Используйте `shallowEqual` функцию из React-Redux в качестве `equalityFn` аргумента `useSelector()`, например:

```js
import { shallowEqual, useSelector } from 'react-redux'

const selectedData = useSelector(selectorReturningObject, shallowEqual)
```

***

### useSelector с shallowEqual

```js
import { shallowEqual, useSelector } from 'react-redux'

const selectedData = useSelector(selectorReturningObject, shallowEqual)
```

`shallowEqual` сравнивает содержимое объекта поле за полем по ссылке или по значению, и если будет найдено различие, то подключённый к `store` компонент будет перерисован

Note:
shallowEqual работает и с массивами

***

### Условие корректной работы

```js
const result: any = useSelector(selector: Function, equalityFn?: Function);
```

`equalityFn` будет корректно работать только в случае immutable-обновлений

***

### Производительность

`useSelector()` не предотвращает повторный рендеринг компонента из-за рендеринга родителя, даже если props компонента не изменились.

Если необходима дальнейшая оптимизация производительности, можно подумать о том, чтобы обернуть компонент в `React.memo()`

***

### Задание 2.8. Cart

***

### Когда подключать компонент к store?

Обратимся к разделу [Style Guide: Best Practices](https://redux.js.org/style-guide/#connect-more-components-to-read-data-from-the-store) документации:

> Предпочтительнее иметь больше UI компонентов подписанных на store Redux, и читать данные на более детальном уровне. Обычно это приводит к повышению производительности UI, поскольку при изменении конкретного фрагмента состояния требуется рендеринг меньшего количества компонентов.

***

### Когда подключать компонент к store?

**Но не следует подключать все компоненты к store!**

К store имеет смысл подключать **общие блоки**, вроде меню или чата.

Например, страницу `Cart` стоит подключить к store, а элемент на странице `Purchase` — нет, поскольку его можно потом использовать для заказов `Orders`.

С другой стороны `Product` на странице `Menu` ранее был подключен к store и при добавлении корзины его удобно использовать.

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

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## 2.9. Передача состояния между слайсами

***

### Действия на несколько слайсов

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

***

### Как передавать состояние между слайсами?

Обратимся к [разделу](https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers) FAQ документации. Можно использовать несколько подходов:
- Реорганизовать структуру state
- Использовать функцию-редюсер верхнего уровня для обработки действий на несколько слайсов
- Передавать часть состояния через action

***

### Реорганизация state

Если редюсеру необходимо получить данные из другого слайса, может потребоваться **реорганизовать структуру** дерева состояний (state) таким образом, чтобы один редьюсер обрабатывал больше данных

Note:
Подход нужно использовать с осторожностью.

***

### Использование редюсера верхнего уровня

```js
const combinedReducer = combineReducers({
  a: sliceReducerA,
  b: sliceReducerB
});

function rootReducer(state, action) {
  const intermediateState = combinedReducer(state, action);
  const finalState = crossSliceReducer(intermediateState, action);
  return finalState;
}

// Create store
const store = configureStore({
  reducer: rootReducer
});
```

Сначала отрабатывают редьюсеры для одиночных слайсов,
а затем при необходимости `crossSliceReducer` вносит изменения,
задевающие несколько слайсов

***

### Пример Cross Slice Reducer

```js
function crossSliceReducer(state, action) {
  switch (action.type) {
    case 'SOME_SPECIAL_ACTION': {
      return {
        // специально state.b передается как дополнительный аргумент
        a: handleSpecialCaseForA(state.a, action, state.b),
        b: sliceReducerB(state.b, action)
      };
    }
    default:
      return state;
  }
}
```

***

### Передача части состояния через action

Можно использовать middleware с асинхронной логикой, такое как redux-thunk, которое имеет доступ ко всему состоянию через getState()

Создатель действия (action creator) может получить дополнительные данные из состояния и поместить их в действие, чтобы у каждого редьюсера было достаточно информации для обновления своего собственного слайса состояния (state slice)

***

### Передача части состояния через action с помощью redux-thunk

```
const asyncThunk = createAsyncThunk(
  "type",
  async (arg, { getState }) => {
    return {arg, counter: getState().counter.value};
  }
);

...

dispatch(asyncThunk(name));
```

***

### Задание 2.9. Orders

***

### Выводы

Redux-thunk можно использовать для передачи состояния между слайсами

</script></section>


<!-- ************************************************* -->


<section data-markdown><script type="text/template">

## Заключение

***

### Обратная связь
Заполни форму обратной связи по ссылке
<a href="http://bit.ly/kontur-courses-feedback">http://bit.ly/kontur-courses-feedback</a>

</script></section>

</div></div>
</body>
</html>