如何在reduxjs/toolkit和react-redux中使用redux-saga，（后端使用node）

文件夹格式 store文件夹中包括index.js,reducer.js,saga.js

index.js

    

import { configureStore, } from "@reduxjs/toolkit";
import reducer from "./reducer";
import { watchGetUser } from './saga';
import createSagaMiddleware from 'redux-saga';
const sagaMiddleware = createSagaMiddleware();
const store = configureStore({
   reducer,
   middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(sagaMiddleware),
})

sagaMiddleware.run(watchGetUser);
export default store

reducer.js

   

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

const Slice = createSlice({
    name: 'aaa',
    initialState: {
        arr: [],
        sum: null
    },
    reducers: {
        
        getUser: (state, action) => { 
            console.log(action,888);
        },
        getUserSuccess: (state, action) => {
            console.log(action,'成功');
            return action.payload;
        },
        getUserFailure: (state, action) => {
            console.log(action,'失败');
            return action.payload;
        },
    }
})
export const {getUser,getUserSuccess,getUserFailure} = Slice.actions
export default Slice.reducer

saga.js

  

import { takeLatest, call, put } from 'redux-saga/effects';
import { getUserSuccess, getUserFailure } from './reducer';
import axios from 'axios';

function* getUser(action) {
    try {
        const res = yield call(axios.get, 'http://localhost:3001/'); // 替换为您的API调用
        const user = res.data
        yield put(getUserSuccess(user));
    } catch (error) {
        yield put(getUserFailure(error));
    }
}

export function* watchGetUser() {
    yield takeLatest('aaa/getUser', getUser);
}

在组件内部使用的话

import { useSelector, useDispatch } from 'react-redux'
import {  getUser } from '../../store/reducer';

const store = useSelector(store => store)
const dispatch = useDispatch()

const ceshi=()=>{
   dispatch(getUser())
 }