Создание приложения React с помощью Redux и TypeScript

В этой статье блога мы рассмотрим различные методы создания приложения React с использованием Redux и TypeScript. Мы рассмотрим различные подходы и предоставим примеры кода для каждого метода. Давайте начнем!

Метод 1: ручная настройка
Первый метод предполагает ручную настройку приложения React с помощью Redux и TypeScript. Выполните следующие действия:

Шаг 1. Создайте новое приложение React, используя шаблон «Создать приложение React с TypeScript».

npx create-react-app my-app --template typescript

Шаг 2. Установите пакеты Redux и React Redux.

npm install redux react-redux

Шаг 3. Настройте хранилище Redux и редукторы.
Создайте файл store.tsи определите конфигурацию хранилища Redux и редукторы.

import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;

Шаг 4. Подключите свое приложение к магазину Redux.
В файле index.tsxоберните компонент приложения Providerиз react-reduxи передайте хранилище Redux в качестве реквизита.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Метод 2: использование Redux Toolkit
Redux Toolkit — популярный пакет, который упрощает настройку Redux и сокращает количество шаблонов. Вот как вы можете использовать Redux Toolkit с приложением Create React и TypeScript:

Шаг 1. Создайте новое приложение React, используя шаблон «Создать приложение React с TypeScript».

npx create-react-app my-app --template typescript

Шаг 2. Установите Redux Toolkit.

npm install @reduxjs/toolkit react-redux

Шаг 3. Создайте фрагмент с помощью метода createSlice() из Redux Toolkit.
Создайте файл counterSlice.tsи определите свой фрагмент Redux с помощью функции createSlice.

import { createSlice } from '@reduxjs/toolkit';
interface CounterState {
  value: number;
}
const initialState: CounterState = {
  value: 0,
};
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Шаг 4. Создайте хранилище с помощью configureStore() из Redux Toolkit.
Создайте файл store.tsи настройте свое хранилище Redux с помощью функции configureStoreиз Redux Toolkit..

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});
export default store;

Шаг 5. Подключите свое приложение к магазину Redux.
Выполните тот же шаг, что и в методе 1, чтобы подключить свое приложение к магазину Redux.

Метод 3: использование шаблона Redux
Если вы предпочитаете более продуманную настройку, вы можете использовать существующие шаблоны Redux, которые предоставляют предварительно настроенную настройку для создания приложения React с помощью Redux и TypeScript. Один из популярных шаблонов — cra-template-redux-typescript. Вот как вы можете его использовать:

Шаг 1. Создайте новое приложение React, используя Create React App и шаблон Redux TypeScript.

npx create-react-app my-app --template redux-typescript

Шаг 2. Подключите свое приложение к магазину Redux.
Выполните тот же шаг, что и в методе 1, чтобы подключить свое приложение к магазину Redux.