Казалось бы, за одну ночь Redux Toolkit стал стандартом де-факто при развертывании Redux в приложении React. В этом сообщении блога я собираюсь разобрать основные различия между ними, чтобы вы могли быстро и эффективно понять преимущества, которые предоставляет этот новый пакет NPM.

В основе Redux Toolkit лежит функция createSlice. Эта функция называется срезом, поскольку она связана с одной частью дерева состояний. В приведенном ниже примере это состояние «расходы».

В то время как ранее в Redux вы должны были писать создателей действий отдельно, одна из замечательных особенностей createSlice заключается в том, что он автоматически генерирует действия для вас.

В приведенном ниже срезе расходов каждая клавиша с «редукторами» соответствует действию, которое можно экспортировать и с которым можно работать. Нет операторов switch, нет проблем.

export const expensesSlice = createSlice({
     name: "expenses",
     initialState: {
        expenses: [],
     },
     reducers: {
        setExpenses: (state, action) => {
          return { ...state, expenses: [...action.payload] };
        },
        newExpenses: (state, action) => {
           return { ...state, expenses: [ action.payload, 
               ...state.expenses ] };
 
           }        
        } 
     }
 })
export const { setExpenses, newExpenses } = expensesSlice.actions
export default expensesSlice.reducer;

Еще одна замечательная особенность Redux Toolkit заключается в том, что он поставляется с полезными инструментами, такими как Immer, которые позволяют вам напрямую изменять состояние. Если вы похожи на меня, одной из самых странных частей изучения Redux было отсутствие мутирующего состояния. Там, где раньше вам приходилось объединять сложные операции распространения, Immer позволяет вам обновлять состояние по мере необходимости.

Рассмотрим пример ниже из редуктора todos:

editTodos: (state, action) => {
     const todoToEdit = state.find(todo => todo.id === payload.id)
        if (todoToEdit) {
            todoToEdit.description = payload.description
        }
}

Здесь, найдя todoToEdit, можно напрямую изменить его описание. Раньше для достижения того же эффекта приходилось использовать Object.assign или slice с операторами расширения.

В дополнение к описанным выше функциям Redux Toolkit обеспечивает поддержку вызова других слайсов внутри слайсов с помощью extraReducers и даже поддержку асинхронных запросов API.

В то время как useContext и useReducer становятся надежными средствами управления состоянием, Redux Toolkit остается лучшим вариантом для крупномасштабных приложений.