Redux - хорошая основа для открытия. Но рекомендуется использовать Redux Toolkit, чтобы упростить задачу. Он был разработан для решения трех общих проблем Redux:
- «Слишком сложно настроить хранилище Redux»
- «Мне нужно добавить много пакетов, чтобы Redux делал что-нибудь полезное»
- «Redux требует слишком много шаблонного кода»
Настройка Redux
Теперь мы настроим определения типов Redux, Redux Toolkit, React-Redux и Typescript. Начните с запуска:
# npm npm install
react-redux@reduxjs/toolkit npm install -D @types/react-redux
# yarn yarn add
react-redux@reduxjs/toolkit
yarn add -D @types/react-redux
Создание действий и редукторов
Начнем с создания нашего user Slice внутри src / sles / users.ts.
мы будем использовать createSlice, одну из волшебных функций, предоставляемых Redux Toolkit, чтобы помочь нам создать фрагмент этого redux-store, который содержит редуктор и действия в одном файле
Базовый метод createSlice выполняет следующие функции:
- name: имя фрагмента для справки
- initialState: начальное состояние редуктора
- редукторы: содержит все действия для изменения состояния редуктора
цель createSlice - уменьшить шаблон, необходимый для добавления данных для сокращения каноническим способом.
Создайте наш rootReducer внутри src/slices/index.ts
, в который мы добавим все наши редукторы.
Чтобы подключить редуктор к Redux, мы добавили его к основному редуктору в store/index.js
:
import {combineReducers} from '@reduxjs/toolkit'; import userReducer from './users'; const rootReducer = combineReducers({ users: userReducer, // if we need to use more reducers }); export type RootState = ReturnType<typeof rootReducer>; export default rootReducer;
theconfigureStore
API из Redux Toolkit создает хранилище Redux, а также автоматически настраивает расширение Redux DevToo ls, чтобы вы могли проверять хранилище во время разработки, позволяет создать файл хранилища в src/store/index.ts
import {Action, configureStore, ThunkAction} from '@reduxjs/toolkit'; import {useDispatch} from 'react-redux'; import rootReducer, {RootState} from '../slices'; const store = configureStore({reducer: rootReducer}); export type AppDispatch = typeof store.dispatch; export type AppThunk = ThunkAction<void, RootState, null, Action<string>>; export const useAppDispatch = () => useDispatch<AppDispatch>(); export default store;
Предоставьте Redux Store для реагирования
После этого мы должны подключить наш магазин к приложению React. Добавьте его в index.ts
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {Provider} from 'react-redux'; import store from './store'; ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root'), );
Подключение Redux к компонентам с помощью useDispatch и useSelector
теперь мы можем интегрировать Redux с чистыми компонентами с помощью хуков!
Конечный результат
Надеюсь, вам понравилось это простое руководство по набору инструментов Redux. Полный репозиторий кода, представленный в этой статье, можно найти на GitHub.
Это было разработано мной в eDonec.