创建一个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