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

react18 中使用@reduxjs/toolkit

1.安装依赖包

yarn add @reduxjs/toolkit react-redux

2.创建 store

根目录下面创建 store 文件夹，然后创建 index.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 文件。

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;

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，触发同步的reducerdispatch(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 包裹。

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 获取数据。

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;