Multiple actions from one redux-toolkit thunk

Question

toolkit, and I'm trying to understand exactly how createAsyncThunk fits in all of this. I want to make a call to my server to get session info and the user's info in one call. However, from what I've seen so far on createAsyncThunk, it only uses a single slice of state? Could someone elaborate on how I could hit both session and user at once? Below is an example to illustrate.

const payload = await myApi.login(loginInfo)
dispatch(loginSession(payload.session)
dispatch(loginUser(payload.user)

export const sessionSlice = createSlice({
    name:'session',
    initialState,
    reducers: {
        loginSession: (state,action:PayloadAction<schema.Session>) => {
            
            state = action.payload
         },
    },
})

export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        loginUser:(state,action:PayloadAction<schema.User>) => {
            if (state !== null) {
                throw new Error('a user is already logged in')
            }
            state = action.payload
        },
    }
})

score 0 · Accepted Answer · answered Aug 28 '22 at 03:12

const payload = await myApi.login(loginInfo)
dispatch(loginFulfilled({ 
  session: payload.session,
  user: payload.user,
})

export const sessionSlice = createSlice({
    name:'session',
    initialState,
    reducers: {
        loginFulfilled: (state,action:PayloadAction<{session: schema.Session}>) => {
            
            state = action.payload.session
         },
    },
})

export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        loginFulfilled:(state,action:PayloadAction<{user: schema.User>}) => {
            if (state !== null) {
                throw new Error('a user is already logged in')
            }
            state = action.payload.user
        },
    }
})

Multiple actions from one redux-toolkit thunk

1 Answers1