redux-toolkit的基础使用

redux-toolkit是目前官方推荐的写法，用这个工具包，可以快速的搭建redux应用。

npm i @reduxjs/toolkit react-redux

首先需要引用Provider：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { Provider } from "react-redux";
import store from "./store/index";
/**
 * @parama {把redux中的所有数据映射到项目中}
 */
ReactDOM.createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>

创建redux数据：需要使用createSlice、configureStore插件：

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

/**
 * @param  {createSlice} 创建一个功能块，包含每一个reducer的所有功能
 *
 */
const appSlice = createSlice({
  name: "app",
  initialState: {
    name: "redux项目",
    count: 1,
  },
  /**
   * @param {数据改变}
   */
  /**
   * @param {reducers} 是同步改变数据的方法，在组件中dispatch派发一个action
   */
  reducers: {
    plus(state, { payload }) {
      state.count += payload;
    },
  },
});
const plusSlice = createSlice({
  name: "plus",
  initialState: {
    desc: "描述",
    data: 2,
  },
});
const store = configureStore({
  reducer: {
    app: appSlice.reducer,
    plus: plusSlice.reducer,
  },
});
export default store;

通过dispatch派发改变数据：

import { useSelector, useDispatch } from "react-redux";
function App() {
  let { name, count } = useSelector((state) => state.app);
  let { data, desc } = useSelector((state) => state.plus);
  /**
   * @param {useDispatch 数据派发}
   */
  const dispatch = useDispatch();
  const changeBtnValue = () => dispatch({ type: "app/plus", payload: 4 });
  return (
    <>
      <h1>{name}</h1>
      <button onClick={() => changeBtnValue()}>{count}</button>
      <p>{data}</p>
      <p>{desc}</p>
    </>
  );
}

export default App;

其中type是（名称/方法名）

-----------------纯属自己学习记录使用！！！