无法从asyncThunk内部调度另一个操作 (redux-toolkit)

huangapple go评论61阅读模式
英文:

Unable to dispatch another action from inside of asyncThunk (redux-toolkit)

问题

我对Redux Toolkit相当新手。
我试图构建一个应用程序,在其中有两个切片。
1)uiState(处理应用程序的全局UI状态)
2)notesState(处理应用程序中的笔记功能的状态)

以下是这两个切片

1)notesSlice
2)uiSlice

import axios from 'axios';
import { showAlert } from "./ui";

const initialState = { entities: [], selectedId: null, selectedEntity: null }

export const getNotes = createAsyncThunk(
    'notes/getNotes',
    async (_, { dispatch }) => {
        dispatch(showAlert())
        const res = await axios.get("http://localhost:8080/api/notes?userId=droy");
        console.log('params', _, dispatch);
       
        return res.data
    }
);

const notesSlice = createSlice({
    name: 'notes',
    initialState: initialState,
    reducers: {},
    extraReducers: {
        [getNotes.fulfilled]: (state, action) => {
            state.entities = action.payload.data
        },
        [getNotes.rejected]: (state) => {
            state.entities = []
        }
    }
});


export default notesSlice.reducer


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

const initialState = { showAlert: false, alertMessage: "" }

const showAlertFn = (state , action) => {
    state.showAlert = true
    state.alertMessage =  action.payload.alertMessage
}

const uiSlice = createSlice({
    name: 'ui',
    initialState: initialState,
    reducers: {
        showAlert :showAlertFn ,
        hideAlert :hideAlertFn
    },
})

console.log(uiSlice)

export const  {showAlert} = uiSlice.actions
export default uiSlice.reducer

在notes切片的asyncThunk中,我试图调度uiSlice的showAlert()动作。
但每当我使用dispatch命令时,代码执行都会停在那一行,什么都不起作用。
我已经搜索过了,但这是提到的语法。

非常感谢您的任何帮助。

英文:

I am pretty new to redux toolkit.
I am trying to build an app where I have two slice .
1)uiState (handles the global ui state for the app)
2)notesState ( handles the state for the notes feature in the app)

Below are the two slices

1)notesSlice
2)uiSlice

import axios from 'axios';
import { showAlert } from "./ui";

const initialState = { entities: [], selectedId: null, selectedEntity: null }

export const getNotes = createAsyncThunk(
    'notes/getNotes',
    async (_, { dispatch }) => {
        dispatch(showAlert())
        const res = await axios.get("http://localhost:8080/api/notes?userId=droy");
        console.log('params', _, dispatch);
       
        return res.data
    }
);

const notesSlice = createSlice({
    name: 'notes',
    initialState: initialState,
    reducers: {},
    extraReducers: {
        [getNotes.fulfilled]: (state, action) => {
            state.entities = action.payload.data
        },
        [getNotes.rejected]: (state) => {
            state.entities = []
        }
    }
});


export default notesSlice.reducer


import { createSlice } from "@reduxjs/toolkit"

const initialState = { showAlert: false, alertMessage: "", showGlobalLoader: false }

const showAlertFn = (state , action) => {
    state.showAlert = true
    state.alertMessage =  action.payload.alertMessage
}

const hideAlertFn = (state) => {
    state.showAlert = false
}

const uiSlice = createSlice({
    name: 'ui',
    initialState: initialState,
    reducers: {
        showAlert :showAlertFn ,
        hideAlert :hideAlertFn
    },
})

console.log(uiSlice)

export const  {showAlert} = uiSlice.actions
export default uiSlice.reducer

In the asyncThunk of the notes slice I am trying to dispatch showAlert() action which is part of uiSlice .
But whenever I use the dispatch command code execution stops at that line and nothing works.
I have searched about the same but this was the syntax mentioned.

Any help will be greatly appreciated.

Thanks in advance

答案1

得分: 1

尝试使用 dispatch(showAlert({ alertMessage: "Your message" })),因为你的函数需要一个有效载荷,但你没有传递任何内容。

英文:

Try dispatch(showAlert({ alertMessage: "Your message" })), since your function expects a payload but you're not passing any.

huangapple
  • 本文由 发表于 2023年7月31日 21:12:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76803985.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定