React状态管理——RTK（Redux Toolkit）

目录

一、介绍

二、安装

三、目录结构设计

四、案例

store子模块搭建（store/counterStore.js）

store主模块搭建（store/index.js）

连接redux和react（index.js）

react组件使用useSelector+useDispatch获取和修改状态(App.js)

一、介绍

二、安装

// 1. 使用 CRA 快速创建 React项目
npx create-react-app react-redux
// 2. 安装配套工具
npm i @reduxjs/toolkit react-redux
// 3. 启动项目
npm run start

三、目录结构设计

四、案例

store子模块搭建（store/counterStore.js）

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

const counterStore = createSlice({
  // name 会作为生成的 action types 的前缀。
  // 如 increment action的type会是'counter/increment'
  name: "counter",
  //初始化状态
  initialState: {
    count: 0,
  },
  // 修改状态的方法 同步方法 支持直接修改
  reducers: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    // action传参来的是存储在action.payload中
    addToNum(state, action) {
      state.count += action.payload;
    },
  },
});

// 结构出来actionCreater函数
const { increment, decrement, addToNum } = counterStore.actions;

// 异步方法
const fetchIncrement = (data, timeout) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(addToNum(data));
    }, timeout);
  };
};

// 获取reducer
const reducer = counterStore.reducer;

// 以按需导出的方式导出actionCreater
export { increment, decrement, addToNum, fetchIncrement };
// 以默认导出的方式导出reducer
export default reducer;

store主模块搭建（store/index.js）

import { configureStore } from "@reduxjs/toolkit";
//导入子模块reducer
import counterReducer from "./counterStore";

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

export default store;

连接redux和react（index.js）

react-redux负责把Redux和React链接 起来，内置 Provider组件 通过 store 参数把创建好的store实例注入到应用中链接正式建立

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

react组件使用useSelector+useDispatch获取和修改状态(App.js)

import {
  increment,
  decrement,
  addToNum,
  fetchIncrement,
} from "./store/counterStore";
import { useSelector, useDispatch } from "react-redux";

function App() {
  // 这里的counter与store/index.js中的counter映射关系
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <div>数值：{count}</div>
      <button onClick={() => dispatch(increment())}>点我+1</button>
      <button onClick={() => dispatch(decrement())}>点我-1</button>
      <button onClick={() => dispatch(addToNum(10))}>点我传参+10</button>
      <button onClick={() => dispatch(fetchIncrement(5, 1000))}>
        异步传参+5
      </button>
    </div>
  );
}

export default App;