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.