【React】React-toolkit

安装

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;