React 应用程序中的 TypeScript 与 Redux

在 React 应用程序中将 TypeScript 与 Redux 集成可增强类型安全性并提高代码可维护性。本指南将逐步介绍如何使用 Redux 设置 TypeScript，包括定义类型以及与 React 组件集成。

步骤 1：安装依赖项

首先，安装 Redux、React-Redux 和 TypeScript 类型必要的包。

npm install redux react-redux @reduxjs/toolkit
npm install @types/react-redux --save-dev

第 2 步：设置 Redux Store

使用 TypeScript 创建 Redux 存储。定义状态和操作的类型，并配置存储。

import { configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './reducers';

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

const store = configureStore({
  reducer: rootReducer,
});

export default store;

步骤 3：定义 Action 和 Reducer

创建操作类型、操作创建器和化简器。使用 TypeScript 定义强类型的状态和操作类型。

import { createSlice, PayloadAction } 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;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

步骤 4：将 Redux 连接到 React 组件

使用 React-Redux 中的 useSelector 和 useDispatch 钩子来连接 Redux 状态并在 React 组件中分派操作。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './store';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(10))}>Increment by 10</button>
    </div>
  );
};

export default Counter;

步骤 5：将 Redux Store 与 React 集成

使用 React-Redux 中的 Provider 组件包装主 React 组件，以将 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')
);

结论

在 React 应用程序中将 TypeScript 与 Redux 结合使用可提供强类型并增强代码可靠性。按照以下步骤，可以使用 TypeScript 设置 Redux 存储，定义操作和 Reducer，并将 Redux 与 React 组件集成。