react项目中使用redux、redux/toolkit

coderzhx

于 2024-01-01 10:23:41 发布

阅读量421

点赞数 8

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_48317565/article/details/135322796

版权

1、安装react-redux、redux/toolkit库

npm i react-redux @reduxjs/toolkit

2、./store/module/home.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { getHomeGoodPriceData } from "../../service/module/home";
export const fetchHomeGoodPriceData = createAsyncThunk(
  "fetchdata",
  (payload, { dispatch }) => {
    getHomeGoodPriceData().then((res) => {
      dispatch(changeHomeGoodPriceData(res.list));
    });
  }
);
const homeSlice = createSlice({
  name: "home",
  initialState: {
    homeGoodPriceData: [],
    count: 100,
  },
  reducers: {
    changeHomeGoodPriceData(state, { payload }) {
      state.homeGoodPriceData = payload;
    },
  },
});
export const { changeHomeGoodPriceData } = homeSlice.actions;
export default homeSlice.reducer;

3、./store/index.js

import { configureStore } from "@reduxjs/toolkit";
import homeStore from "./module/home";
const store = configureStore({
  reducer: {
    home: homeStore,
  },
});
export default store;

4、./index.jsx

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

5、在组件中使用

import { memo, useEffect } from "react";
import { HomeWrapper } from "./style";
import { useSelector, useDispatch } from "react-redux";
import { fetchHomeGoodPriceData } from "../../store/module/home";
function home() {
  const { count, homeGoodPriceData } = useSelector((state) => state.home);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchHomeGoodPriceData());
  }, [dispatch]);
  return (
    <HomeWrapper>
      <div>home</div>
      <div>{count}</div>
      <div>
        {homeGoodPriceData.map((item, index) => {
          return <div key={index}>{item.name}</div>;
        })}
      </div>
    </HomeWrapper>
  );
}

export default memo(home);