英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论