1，使用步驟

使用React Toolkit 創建 counterStore（store目錄下） --> 為React注入store（src下面的index） --> React組件使用store中的數據（組件）

2，例如下面有一個簡單加減的案例

先來看一下項目目錄

counterStore代碼：

import { createSlice } from '@reduxjs/toolkit'const counterStore = createSlice({// 模塊名稱獨一無二name: 'counter',// 初始數據initialState: {count: 1},// 修改數據的同步方法reducers: {increment (state) {state.count++},decrement(state){state.count--}}
})
// 結構出actionCreater
const { increment,decrement } = counter.actions// 獲取reducer函數
const counterReducer = counterStore.reducer// 導出
export { increment, decrement }
export default counterReducer

store下面 index 的代碼：

import { configureStore } from '@reduxjs/toolkit'import counterReducer from './modules/counterStore'export default configureStore({reducer: {// 注冊子模塊counter: counterReducer}
})

src下面index 的代碼：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 導入store
import store from './store'
// 導入store提供組件Provider
import { Provider } from 'react-redux'ReactDOM.createRoot(document.getElementById('root')).render(// 提供store數據<Provider store={store}><App /></Provider>
)

App的代碼：

import { useSelector, useDispatch } from 'react-redux'
import {decrement,increment} from './store/modules/counterStore'function App(){const dispatch = useDispatch()// 錯誤使用// const count = useSelector(state=>state.counter)// 正確使用const {count} = useSelector(state=>state.counter)return (<div><button onClick={()=>dispatch(decrement())}>-</button><h1>{count}</h1><button onClick={()=>dispatch(increment())}>+</button></div>);
}export default App;

頁面是這樣的，點擊加減數字就會改變了