添加 Redux 以响应 TypeScript

Redux 是一种流行的状态管理库，它可以在应用程序中轻松管理数据的流动。当您使用 TypeScript 编写应用程序时，Redux 可以帮助您避免类型错误并提供更好的类型支持。

在本文中，我们将介绍如何在 TypeScript 中使用 Redux 的基础知识，包括如何定义和使用类型和接口。

前置知识

在开始之前，您应该具备以下技能：

• 对 TypeScript 的基本知识
• 对 Redux 的基本知识
• 对 React 的基本知识

安装和设置

要在 TypeScript 中使用 Redux，您需要安装以下软件包：

npm install --save redux @types/redux
npm install --save react-redux @types/react-redux

然后，您需要设置 Redux Store 和 Provider。让我们从创建 Store 开始。

创建 Store

与传统的 Redux Store 类似，您需要创建一个函数，该函数将返回应用程序的状态树。

import { createStore } from 'redux';

const myReducer = (state = {}, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const store = createStore(myReducer);

这将创建一个基本的 Redux Store，具有一个 Reducer 函数。在我们了解 Reducer 函数的工作原理之前，让我们来回顾一下 Redux Store 的“State”和“Action”。

State 和 Action

Redux 延续了 Flux 的模式，“State”代表了应用程序的状态树，而“Action”代表了执行应用程序状态更改的操作。

在 TypeScript 中，我们可以使用接口来定义我们的“State”和“Action”。

interface RootState {
  counter: number;
}

interface IncrementAction {
  type: 'increment';
  amount: number;
}

interface DecrementAction {
  type: 'decrement';
  amount: number;
}

type RootAction = IncrementAction | DecrementAction;

const initialState: RootState = {
  counter: 0,
};

const myReducer = (state: RootState = initialState, action: RootAction): RootState => {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        counter: state.counter + action.amount,
      };
    case 'decrement':
      return {
        ...state,
        counter: state.counter - action.amount,
      };
    default:
      return state;
  }
};

在此示例中，我们定义了一个计数器应用程序的状态树，并定义了两个 Action 类型：增量和减量。当我们调度一个“增量”操作时，state.counter 属性将增加动作的量。当我们调度一个“减量”操作时，state.counter 属性将减少动作的量。

使用 Provider

Provider 组件是在 React 应用程序中使用 Redux 的首选方式。它允许您将 Store 注入整个应用程序，并使您可以在整个应用程序中轻松调度操作。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './App';
import reducer from './reducers';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

这将使用 Store 包装整个应用程序，以使其在应用程序的任何地方都能够使用。

结论

Redux 和 TypeScript 一起使用非常有用。在 TypeScript 中，Redux 可以帮助您避免许多常见错误，并提供更好的类型支持。虽然这只是 Redux 的基础知识，但它足以让您在 TypeScript 应用程序中使用 Redux 并开始管理状态。