49 lines
3.7 KiB
Markdown
49 lines
3.7 KiB
Markdown
---
|
||
title: Redux Reducers
|
||
localeTitle: Редукторы Redux
|
||
---
|
||
## Редукторы Redux
|
||
|
||
Редукторы Redux позволяют вам вносить изменения в ваше состояние в вашем приложении. Действия в redux только сообщают приложению, что в основном произошло. Было ли это событие щелчка, или какой-либо прокруткой мыши, он просто скажет, что это произошло. Теперь, как вы собираетесь менять состояние своего приложения, которое живет внутри магазина, вы это делаете с помощью редуктора.
|
||
|
||
Теперь редуктор в редуксе должен быть чистой функцией. Чистая функция - это тип функции, которая не имеет дополнительных побочных эффектов. Вы передаете ему некоторые аргументы и возвращает ожидаемый результат. Например:
|
||
|
||
```javascript
|
||
function add(a,b) {
|
||
return a + b;
|
||
}
|
||
|
||
const sum = add(5,4);
|
||
```
|
||
|
||
Вышеупомянутая функция чиста, потому что независимо от того, что произойдет, она вернется 9. Функция, которая имеет вызовы ajax внутри нее или что-то вроде доступа к базе данных, не является чистой функцией. Даже если мы мутируем изменение значения, переменное значение можно рассматривать не как чистую функцию.
|
||
|
||
Теперь, чтобы внести изменения в состояние, вы используете редуктор. Вот пример кода редуктора:
|
||
|
||
```javascript
|
||
function todoReducer(state= [],action) {
|
||
case 'ADD_TODO':
|
||
return [...state,action.data]
|
||
case 'DELETE_TODO':
|
||
return state.filter(todo=>todo.id !== action.id)
|
||
default:
|
||
return state;
|
||
}
|
||
```
|
||
|
||
Что делает этот todoReducer, так это то, что он принимает текущее состояние и действие, которое было вызвано, а затем возвращает новое состояние. Здесь мы использовали синтаксис параметров по умолчанию es6, чтобы присвоить значение по умолчанию массиву состояний. Объект действия для вышеуказанного редуктора может выглядеть следующим образом:
|
||
|
||
```javascript
|
||
{
|
||
type: 'ADD_TODO',
|
||
data: {name: 'Learn Redux',completed:false}
|
||
}
|
||
```
|
||
|
||
Здесь действие имеет свойство типа «ADD\_TODO» с объектом данных. Теперь, когда это действие инициировано, оно принимается редуктором, а затем на основе оператора switch он возвращает новый массив с существующими данными вместе с новыми данными.
|
||
|
||
Таким образом, суммировать редукторы - это не что иное, как чистые функции, которые возвращают новое состояние для вашего приложения.
|
||
|
||
#### Дополнительная информация:
|
||
|
||
[Официальные документы Redux-Reducers](https://redux.js.org/basics/reducers) |