創(chuàng)建一個React項目，選擇Ract，JavaScript + SWC

yarn create vite redux-app
cd redux-app
git init
yarn
yarn add @reduxjs/toolkit react-redux

redux/counterSlice.jsx

import {createSlice} from "@reduxjs/toolkit";

const initialState = {
    value: 0
}

export const counterSlice = createSlice({
    name: "counter",
    initialState,
    reducers: {
        increment: state => {
            state.value += 1
        }
    }
})

export const {increment} = counterSlice.actions
export default counterSlice.reducer

redux/store.jsx

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

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

index.jsx

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {Provider} from "react-redux";
import {store} from "./redux/store.jsx";

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

app.jsx

import './App.css'
import {useDispatch, useSelector} from "react-redux";
import {increment} from "./redux/counterSlice.jsx";

function App() {
    const count = useSelector(state => state.counter)
    const dispatch = useDispatch();

    return (
        <>
            <div className="card">
                <button onClick={() => dispatch(increment())}>
                    count is {count.value}
                </button>
            </div>
        </>
    )
}

export default App