企业网站推广成功案例_莱芜网站建设排行_企业seo网络营销_成都正规搜索引擎优化

安装

npm install @reduxjs/toolkit react-redux

创建 slice

src/store/counterSlice.js

import { createSlice } from "@reduxjs/toolkit";const counterSlice = createSlice({name: "counter",initialState: {number: 0,},reducers: {add: (state) => {state.number++;},sub: (state) => {state.number--;},addPayload: (state, action) => {console.log(action);state.number += action.payload;},},
});
export const { add, sub, addPayload } = counterSlice.actions;
export default counterSlice.reducer;

配置 store

src/store/store.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
const store = configureStore({reducer: {counter: counterReducer,},
});
export default store;

在根组件中提供 store

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { Provider } from "react-redux";
import store from "./redux/store.js";createRoot(document.getElementById("root")).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>
)

使用 store

app.jsx

import { useDispatch, useSelector } from "react-redux";
import "./App.css";
import { add, addPayload, sub } from "./redux/counterSlice";function App() {const count = useSelector((state) => state.counter.number);const dispatch = useDispatch();return (<><div><h1>{count}</h1><button onClick={() => dispatch(add())}>加 1</button><button onClick={() => dispatch(sub())}>减 1</button><button onClick={() => dispatch(addPayload(5))}>加固定的数</button></div></>);
}export default App;