reactjs18 中使用@reduxjs/toolkit同步异步数据的使用

react18 中使用@reduxjs/toolkit

1.安装依赖包

bash 复制代码
yarn add @reduxjs/toolkit react-redux

2.创建 store

根目录下面创建 store 文件夹,然后创建 index.js 文件。

js 复制代码
import { configureStore } from "@reduxjs/toolkit";
import { counterReducer } from "./features/counter";
import counterReducers from "./modules/counterStore";
import channelReducers from "./modules/channelStore";

export const store = configureStore({
  reducer: {
    counterReducers,
    channelReducers,
  },
  middleware: (getDefaultMiddleware) => {
    const middlewares = getDefaultMiddleware();
    return [...middlewares /* ... */];
  },
});

export default store;

3.创建模块

在 store 文件夹下面创建 modules 文件夹,然后创建 counterStore.js 和 channelStore.js 文件。

js 复制代码
import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 10,
  },
  reducers: {
    increase(state) {
      state.count += 1;
    },
    decrease(state) {
      state.count -= 1;
    },
    addToNum(state, action) {
      state.count += action.payload;
    },
  },
});

const { increase, decrease, addToNum } = counterStore.actions;
const reducer = counterStore.reducer;
//导出给组件使用
export { increase, decrease, addToNum };
//导出reducer,给store使用
export default reducer;
js 复制代码
import { createSlice } from "@reduxjs/toolkit";

const store = createSlice({
  name: "channel",
  initialState: {
    channelLists: [
      {
        id: 1,
        name: "React",
      },
    ],
  },
  reducers: {
    setChannels(state, action) {
      //下拉分页时,追加数据
      // state.channelLists = [...state.channelLists, ...action.payload];
      //上拉刷新时,替换数据
      state.channelLists = action.payload;
    },
  },
});

const { setChannels } = store.actions;
const reducer1 = store.reducer;

//异步请求
const fetchChannel = () => {
  //返回一个新函数
  return async (dispatch) => {
    //封装异步请求
    const response = await fetch("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
    const data = await response.json();
    //派发action,触发同步的reducer
    dispatch(setChannels(data));
  };
};
//导出给组件使用
export { setChannels, fetchChannel };
//导出reducer,给store使用
export default reducer1;

@reduxjs/toolkit 思路有点类似与 vuex,但是 vuex 是 vue 的插件,而@reduxjs/toolkit 是 react 的库。

在异步操作时,都是用在异步方法中,去调用同步的方法来更新数据,vue中commit,@reduxjs/toolkit中使用dispatch

4.使用 store

在全局组件中引入 store,然后使用 Provider 包裹。

js 复制代码
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";

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

5.使用组件

在组件中引入 store,然后使用 useSelector 获取数据。

js 复制代码
import "./App.css";
import { useState, useEffect } from "react";
import "./style.css";
import store from "./store";
import { useSelector, useDispatch } from "react-redux";
import { increase, decrease, addToNum } from "./store/modules/counterStore";
import { fetchChannel } from "./store/modules/channelStore";

function App() {
  const { count } = useSelector((state) => state.counterReducers);
  const { channelLists } = useSelector((state) => state.channelReducers);
  console.log("🚀 ~ App ~ channelLists:", channelLists);
  const dispatch = useDispatch();

  const handleAdd = () => {
    dispatch(increase(5));
  };
  const handleMinus = () => {
    dispatch(decrease());
  };

  const handleAddTen = () => {
    dispatch(addToNum(10));
  };
  //组件加载时,自动触发一次请求
  // useEffect(() => {
  //   dispatch(fetchChannel());
  // }, [dispatch]);

  //点击按钮时加载数据
  const handleGetUserLists = () => {
    // dispatch({ type: "GET_USER_LISTS" });
    dispatch(fetchChannel());
  };

  const renderUserLists = () => {
    return channelLists?.map((item, index) => {
      return (
        <li key={index}>
          <img width="50px" src={item.avatar_url} />
          <span>{item.login}</span>
        </li>
      );
    });
  };

  return (
    <div className="App">
      <button onClick={handleAdd}>add</button>
      <button onClick={handleAddTen}>add 10</button> {count}
      <button onClick={handleMinus}>minus</button>
      <button onClick={handleGetUserLists}>获取用户列表</button>
      <ul>{renderUserLists()}</ul>
    </div>
  );
}

export default App;
相关推荐
White graces6 分钟前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea
庸俗今天不摸鱼6 分钟前
Canvas进阶-4、边界检测(流光,鼠标拖尾)
开发语言·前端·javascript·计算机外设
bubusa~>_<30 分钟前
解决npm install 出现error,比如:ERR_SSL_CIPHER_OPERATION_FAILED
前端·npm·node.js
风清云淡_A1 小时前
【react18】如何使用useReducer和useContext来实现一个todoList功能
react.js
流烟默1 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
梨落秋溪、1 小时前
输入框元素覆盖冲突
java·服务器·前端
菲力蒲LY2 小时前
vue 手写分页
前端·javascript·vue.js
天下皆白_唯我独黑2 小时前
npm 安装扩展遇到证书失效解决方案
前端·npm·node.js
~欸嘿2 小时前
Could not download npm for node v14.21.3(nvm无法下载节点v14.21.3的npm)
前端·npm·node.js
化作繁星3 小时前
React 高阶组件的优缺点
前端·javascript·react.js