Redux Toolkit
Более простое (функциональное) управление состоянием
Так что я просто узнал об этом из-за моего нового проекта, в котором команда хочет провести фактическое исследование, прежде чем погрузиться в проект. Они не хотят следовать тому же старому стеку технологий, они хотят немного повеселиться.
Поэтому, когда меня спросили, работал ли я над React / Toolkit, я сказал «да», думая, что речь идет о Redux dev toolkit, но я ошибался.
Примечание это первая часть из трех частей, в которых я проведу вас от новичка до продвинутого уровня инструментария.
Так что же такое Redux-toolkit?
Redux-toolkit - это новый способ реализации Redux, более функциональный способ. Он чище, вы пишете меньше строк кода, и мы получаем то же управление состоянием Redux, которое мы полюбили и которому доверяем. Самое приятное, что он поставляется с уже встроенным redux-thunk. Кроме того, они используют immerJs для обработки всей неизменяемости, поэтому все, о чем нам нужно думать, - это то, что нужно сделать.
Я буду создавать приложение счетчика, чтобы реализовать основы набора инструментов.
* Примечание: я буду использовать свой собственный react-robotplate с библиотекой Rebass для стилизации
Начнем
Прежде всего, давайте добавим инструментарий Rebass и react-redux:
npm i --save @reduxjs/toolkit react-redux rebass
Теперь, по традиции redux, мы создали папку store для хранения всех редукторов, действий и файла констант (типов действий). Здесь каждый редуктор рассматривается как функция, поэтому папка store переименовывается в feature / особенности.
Итак, я создал файл features / counter / counter.js, в котором буду реализовывать инструментарий.
Для реализации редуктора нам потребуются три вещи:
- Начальное состояние
- Действия
- Сам редуктор
Redux-toolkit предоставляет нам функции, похожие на хуки, для создания наших действий и редюсера.
import { createAction, createReducer } from "@reduxjs/toolkit";
Давайте определим наше начальное состояние и редуктор:
* Примечание: я буду сравнивать традиционную реализацию с набором инструментов
//tradtional reducer
const initialState = 0;
function counter(initialState, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}}
//toolkit reducer
const initialState = {value: 0};
const reducer = createReducer(initialState, {
"INCREMENT": state => {
state.value = state.value + 1;
},
"DECREMENT": state => {
state.value = state.value - 1;
}
});
Наше начальное значение будет равно 0. В редукторе нам нужно выполнить два действия: увеличение и уменьшение значения счетчика.
Функция createReducer принимает два параметра, первый из которых является начальным состоянием, а второй - типами действий.
В традиционной реализации redux мы бы создали отдельную файловую структуру для типов действий, но в redux-toolkit она определяется в одном месте. Это значительно улучшает ремонтопригодность кода, поскольку все находится в одном месте и структурировано.
Давайте продолжим
В приведенном выше примере мы использовали метод createReducer для определения редуктора, но позвольте разделить наши действия.
Метод createAction делает то, что он говорит, он создает действие с типом действия и обновляет состояние редуктора.
При использовании с createReducer используйте функцию builder для сопоставления действий с reducer.
const increment = createAction("counter/increment");
const decrement = createAction("counter/decrement");
const reducer = createReducer(initialState, (builder) => {
builder.addCase(increment, (state, action) => {
state.value = state.value + 1;
});
builder.addCase(decrement, (state, action) => {
state.value = state.value - 1;
});
});
Эти действия можно экспортировать и отправлять с помощью ловушки useDispatch или mapDispatchToProps.
Чтобы проверить полный пример, вы можете проверить репозиторий git здесь.
Часть 2 по созданию срезов в Redux Toolkit.
