Search code examples
reduxredux-thunkredux-toolkit

Multiple actions from one redux-toolkit thunk


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
        },
    }
})

Solution

  • 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
            },
        }
    })