语法

2025年04月11日

柏拉文

越努力，越幸运

一、最佳实践

---

1.1 Counter Slice

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

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    add(state) {
      state.value += 1;
    },
    min(state) {
      state.value -= 1;
    },
    set(state, action: PayloadAction<number>) {
      state.value = action.payload;
    },
  },
  selectors: {
    getCount(state) {
      return state.value;
    },
  },
});

export default counterSlice;
export const { add, min, set } = counterSlice.actions;
export const counterSelectors = counterSlice.selectors;

1.2 全局 Store

import counterSlice from "./slices/counter";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

export default store;

export type RootState = ReturnType<typeof store.getState>;

1.3 入口配置

import App from "./App.tsx";
import { Provider } from "react-redux";
import ReactDOM from "react-dom/client";
import store from "./store/reduxToolkit";

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

1.4 状态使用

import {
  add,
  min,
  set,
  counterSelectors,
} from "./store/reduxToolkit/slices/counter";
import { useDispatch, useSelector } from "react-redux";

const App = () => {
  const dispatch = useDispatch();
  const count = useSelector(counterSelectors.getCount);

  const handleAdd = () => {
    dispatch(add());
  };

  const handleMin = () => {
    dispatch(min());
  };

  const handleSet = () => {
    dispatch(set(10));
  };

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => handleAdd()}>增加</button>
      <button onClick={() => handleMin()}>减少</button>
      <button onClick={() => handleSet()}>设置</button>
    </div>
  );
};

export default App;