可以从 redux-toolkit 中的另一个操作分派切片的操作吗？

Question

我正在使用 redux-toolkit 并有 2 个切片：“auth”和“profile”

auth => 处理有关令牌
配置文件的信息 => 处理有关用户帐户的信息

当用户尝试登录时，我向 api 发送请求，该请求返回用户令牌和帐户信息。然后我需要保存这些信息。我将令牌放入相应的字段（在同一切片中）。我需要将我的帐户信息放入“profile”切片（登录处理发生在“auth”切片中）。现在我只是从“auth”切片分派 setProfile 操作。

从“auth”切片分派“profile”操作是否是反模式？或者我必须将此逻辑从 redux 移至组件？或者在切片之外进行“登录”操作？或者我需要将它们全部保留在一片中吗？

// 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

Answer 1

你不能在 slice/reducer 内部调度 actions，尽管你当然可以从 thunk 中调度 actions，无论它写在哪里。

但是，您可以在任何其他减速器中监听另一个切片的操作，事实上这是我们鼓励的模式：

• 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

这样做时要注意的一件事是，如果两个不同的切片相互依赖，您最终可能会遇到“循环导入依赖”问题，在这种情况下，您需要提取一些常见的功能才能中断导入循环：

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

token在这种特定情况下，我发现您实际上是将值与其余数据分开。我建议分派一个包含所有收到的登录数据的操作，并让两个切片减速器挑选出它们关心的部分。