React Native - configureStore

在 React Native 项目中使用 Redux 时，configureStore 是一个常见的模式，用于设置和配置 Redux store。这个方法通常用于创建 Redux store，并同时集成中间件、增强器等。在结合 TypeScript 使用时，configureStore 还可以帮助确保整个应用的状态类型安全。

以下是一个使用 redux, redux-thunk（作为异步中间件），以及 @reduxjs/toolkit（提供了 configureStore 方法）的示例：

步骤 1: 安装必要的库

首先，安装必要的库：

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

步骤 2: 创建 Redux State 和 Reducer

使用 createSlice 从 @reduxjs/toolkit 创建一个 Redux state slice 和 reducer。这个方法可以简化标准 Redux 模式：

// src/redux/slices/counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
}

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

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    incremented: state => {
      state.value += 1;
    },
    decremented: state => {
      state.value -= 1;
    },
    incrementedByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { incremented, decremented, incrementedByAmount } = counterSlice.actions;
export default counterSlice.reducer;

步骤 3: 配置 Store

使用 configureStore 从 @reduxjs/toolkit 配置你的 Redux store：

// src/redux/store.ts
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slices/counterSlice';

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

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

export default store;

步骤 4: 在应用中提供 Store

在应用的最高层级使用 Provider 组件包裹整个应用，并将 store 传递给它：

// src/App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import store from './redux/store';
import CounterComponent from './components/CounterComponent';

const App = () => (
  <Provider store={store}>
    <CounterComponent />
  </Provider>
);

export default App;

步骤 5: 连接 React 组件

使用 useDispatch 和 useSelector 钩子连接 React 组件到 Redux store：

// src/components/CounterComponent.tsx
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../redux/store';
import { incremented, decremented } from '../redux/slices/counterSlice';

const CounterComponent = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(incremented())}>Increment</button>
      <button onClick={() => dispatch(decremented())}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

在这个示例中，configureStore 提供了一个简单的方式来设置你的 Redux store，并且通过使用 @reduxjs/toolkit 的 createSlice 方法，你可以轻松地管理你的 actions 和 reducers。同时，使用 TypeScript 有助于确保类型安全，并简化了状态管理的复杂性。