I'm using redux-toolkit and have 2 slices: "auth" and "profile"

auth => handle information about token
profile => handle information about user account

When user tries to login, I send request to api, that returns me the user token and account information. Then I need to save this information. I put token to corresponding field (in same slice). And I need to put my account information to "profile" slice (login processing takes place in the "auth" slice). Now i'm just dispatch setProfile action from 'auth' slice.

Is it anti-pattern to dispatch "profile" action from "auth" slice? Or I have to move this logic from redux to component? Or make "login" action outside of slice? Or do I need to keep it all in one slice?

// PROFILE SLICE | profile.js 

const initialState = {
  data: {},
  status: 'idle'
}

export const profileSlice = createSlice({
  name: 'profile',
  initialState,
  reducers: {
    setProfile(s, {payload: profile}) {
      s.profile = profile
    }
  }
})

export const {setProfile} = userSlice.actions;
export default profileSlice.reducer


// AUTH SLICE | auth.js

import {setProfile} from './profile' // import action creator from profile slice

const initialState = {
  token: null,
  status: 'idle'
}

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setToken(s, {payload: token}) {
      s.token = token
    }
  }
})

export const login = ({email, password}) => dispatch => {
  return api.auth.login({
    email,
    password
  })
    .then(res => {
      const {token, ...profile} = res.data
      dispatch(setToken(token))
      dispatch(setProfile(profile)
    })
}

export const {setToken} = authSlice.actions;
export default authSlice.reducer

I'm using redux-toolkit and have 2 slices: "auth" and "profile"

auth => handle information about token
profile => handle information about user account

When user tries to login, I send request to api, that returns me the user token and account information. Then I need to save this information. I put token to corresponding field (in same slice). And I need to put my account information to "profile" slice (login processing takes place in the "auth" slice). Now i'm just dispatch setProfile action from 'auth' slice.

Is it anti-pattern to dispatch "profile" action from "auth" slice? Or I have to move this logic from redux to component? Or make "login" action outside of slice? Or do I need to keep it all in one slice?

// PROFILE SLICE | profile.js 

const initialState = {
  data: {},
  status: 'idle'
}

export const profileSlice = createSlice({
  name: 'profile',
  initialState,
  reducers: {
    setProfile(s, {payload: profile}) {
      s.profile = profile
    }
  }
})

export const {setProfile} = userSlice.actions;
export default profileSlice.reducer


// AUTH SLICE | auth.js

import {setProfile} from './profile' // import action creator from profile slice

const initialState = {
  token: null,
  status: 'idle'
}

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setToken(s, {payload: token}) {
      s.token = token
    }
  }
})

export const login = ({email, password}) => dispatch => {
  return api.auth.login({
    email,
    password
  })
    .then(res => {
      const {token, ...profile} = res.data
      dispatch(setToken(token))
      dispatch(setProfile(profile)
    })
}

export const {setToken} = authSlice.actions;
export default authSlice.reducer

• javascript
• reactjs
• redux
• redux-toolkit

• you have few options. - dispatch another action from your success handler. or you can write middleware (or use some) to observe the actions and dispatch another if there is your success auth action being processed. – webduvet Commented Apr 23, 2021 at 14:52

1 Answer 1

You can't dispatch actions inside of a slice / reducer, although you can certainly dispatch actions from within a thunk wherever it's written.

However, you can listen for another slice's actions in any other reducer, and in fact this is a pattern we encourage:

• https://redux.js.org/style-guide/style-guide#model-actions-as-events-not-setters
• https://redux.js.org/style-guide/style-guide#allow-many-reducers-to-respond-to-the-same-action

The one thing to be aware of when doing that is that if two different slices depend on each other, you can end up with a "circular import dependency" issue, in which case you need to extract some common functionality in order to break the import cycle:

https://redux-toolkit.js.org/usage/usage-guide#exporting-and-using-slices

In this specific case, I see that you're actually separating out the token value from the rest of the data. I would suggest dispatching a single action that has all the received login data, and let both slice reducers pick out the pieces that they care about.