Redux хорош, но этот лучше
Redux опробован и протестирован как глобальное управление состоянием для React. Он имеет множество функций, а вся экосистема redux точно настроена и значительно упрощает разработку и управление состоянием.
Я работаю с React более 5 лет, многое изменилось для меня в процессе, одна вещь, которая остается неизменной, — это redux.
Но одна вещь, которую мы не замечали, пока не стала очевидной, — это огромное количество шаблонов, которые необходимо сделать для достижения простейшей функциональности.
Обычная редукционная архитектура включает в себя действие и редуктор, который изменяет состояние как редукцию, вдохновленную функциональным программированием.
Набор инструментов Redux
Набор инструментов Redux – это редукция с питанием от батареи.
Официальный, самоуверенный набор инструментов с батарейками для эффективной разработки Redux.
Положительные стороны набора инструментов Redux.
Простой
Очень просто подключить ваше приложение к редуксу, создать действия и использовать эти действия в виде настраиваемых хуков.
самоуверенный
Это дает вам стандарт работы с редуксом, поэтому количество ошибок уменьшается.
Мощный
Ваши действия легко работают как настраиваемые крючки, у вас есть возможность иммерсировать, поэтому вам не нужно беспокоиться о том, чтобы ваше состояние функционировало должным образом без скрытых ошибок из-за неизменяемости или состояния, которое не изменяется должным образом. У вас есть как ленивые, так и обычные хуки в зависимости от вашего варианта использования, а также вы получаете стандарт для написания API.
Эффективный
Изюминка всех них заключается в том, что они выполняют больше работы с меньшим количеством кода, поскольку все уже настроено для вас, а шаблон действий/редуктора сокращен вдвое.
Конфигурация набора инструментов Redux
store.js
import { configureStore } from '@reduxjs/toolkit' import counterReducer from '../features/counter/counterSlice' export const store = configureStore({ reducer: { counter: counterReducer, } )
основное приложение.js
import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App from './App' import { store } from './app/store' import { Provider } from 'react-redux' ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
Встречный срез (Действие + Редуктор)
import { createSlice } from '@reduxjs/toolkit' const initialState = { value: 0, } export const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { // Redux Toolkit allows us to write "mutating" logic in reducers. It // doesn't actually mutate the state because it uses the Immer library, // which detects changes to a "draft state" and produces a brand new // immutable state based off those changes state.value += 1 }, decrement: (state) => { state.value -= 1 }, incrementByAmount: (state, action) => { state.value += action.payload }, }, }) // Action creators are generated for each case reducer function export const { increment, decrement, incrementByAmount } = counterSlice.actions export default counterSlice.reducer
Ваш компонент, который использует эти действия
import React from 'react' import { useSelector, useDispatch } from 'react-redux' import { decrement, increment } from './counterSlice' export function Counter() { const count = useSelector((state) => state.counter.value) const dispatch = useDispatch() return ( <div> <div> <button aria-label="Increment value" onClick={() => dispatch(increment())} > Increment </button> <span>{count}</span> <button aria-label="Decrement value" onClick={() => dispatch(decrement())} > Decrement </button> </div> </div> ) }
Это так же просто, как то, что у вас есть мощь редукса с беспроблемным / оптимизированным опытом.
Использованная литература:
В 2022 году я думаю, что RTK — это способ написать управление состоянием в вашем приложении React.
Продолжайте суетиться и учиться. Мир!!