TypeScript中的Redux如何與TypeScript配合使用

在TypeScript中使用Redux通常需要做一些額外的工作來確保類型安全和正確性。下面是一些與TypeScript配合使用Redux的常見做法：

1. 定義action類型：使用字符串常量或枚舉類型來定義action的類型，這樣可以在代碼中避免拼寫錯誤。

// actionTypes.ts
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

// actions.ts
interface IncrementAction {
  type: typeof INCREMENT;
}

interface DecrementAction {
  type: typeof DECREMENT;
}

export type Action = IncrementAction | DecrementAction;

2. 定義state類型：使用接口或類型別名來定義store的state類型。

// state.ts
interface CounterState {
  count: number;
}

const initialState: CounterState = {
  count: 0,
};

export default initialState;

3. 定義reducer函數：使用泛型來定義reducer函數的state和action類型。

// reducer.ts
import { Action } from './actions';
import initialState, { CounterState } from './state';

const counterReducer = (state: CounterState = initialState, action: Action): CounterState => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

4. 創建store：使用createStore函數創建store時，可以通過泛型指定store的state類型。

// store.ts
import { createStore } from 'redux';
import counterReducer from './reducer';
import { CounterState } from './state';

const store = createStore<CounterState>(counterReducer);

export default store;

通過以上方式，可以在TypeScript中使用Redux，并保證類型安全和正確性。同時，使用Redux Toolkit等工具也可以簡化Redux的使用，并提供更好的類型支持。