如何使用typescript访问reduxtoolkit中的切片缩减器的getState()？

npm install @reduxjs/toolkit react-redux

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

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

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

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

import React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from './store'; // 导入上面定义的RootState类型

const CounterComponent: React.FC = () => {
  const counterValue = useSelector((state: RootState) => state.counter.value);

  return (
    <div>
      <p>Counter: {counterValue}</p>
      {/* 其他组件代码 */}
    </div>
  );
};

export default CounterComponent;