反应 redux createSlice 或 createReducer [关闭]

Question

我是初学者，不知道createSlice和createReducer有什么区别。

我应该选择哪个？

其次，我今天看了一个教程。这家伙刚刚制作了一个 store.js 文件和一个 userslice.js 文件。 非常简单。

但他使它与 redux 文档有点不同。他在 userSlice.js 的末尾导出了三个 CONST，而不是文档中的两个。 （我已发表评论） 如果我把 state.user.user 改成 state.user.wtf……过一会我会运行出错，因为有些组件已经无法访问用户对象了。

用户切片

import { createSlice } from '@reduxjs/toolkit';



export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {

      state.user = action.payload;
    },

    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;

export const selectUser = (state) => state.user.user; // What is that ? and why is it state.user and then a third user Object ???

export default userSlice.reducer;

在应用程序中。 js他发出了那个命令

 const user = useSelector(selectUser);

instead 

  const user = useSelector(state => state.user.user);

我真的不明白其中的区别

store.js 文件

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice'

export default configureStore({
  reducer: {
    user: userReducer,
  },
});

有人可以解释一下吗。我很困惑

Answer 1

在您关于createSlice 和createReducer 的问题的第一部分之后：

不知道createSlice和createReducer有什么区别。

阅读 Redux Toolkit 文档是一个很好的帮助来源，它说：

createSlice：一个函数，接受一个初始状态、一个充满reducer函数的对象和一个“切片名称”，并自动生成对应于reducer和状态的动作创建者和动作类型。

createReducer：一个简化创建 Redux reducer 函数的实用程序。它在内部使用 Immer 通过在您的 reducer 中编写“可变”代码来大幅简化不可变更新逻辑，并支持直接将特定操作类型映射到 case reducer 函数，这些函数将在调度该操作时更新状态。

重要声明：

在内部，createSlice 使用 createAction 和 createReducer，[...]

您可以将createSlice 理解为一个使用createReducer 的函数或一个助手来绑定东西。

关于你问题的第二部分：

export const selectUser = (state) => state.user.user; // What is that ? and why is it state.user and then a third user Object ???

Selectors 是您在使用 Redux 查看应用程序时发现的一种非常常见的模式。

“选择器”只是一个函数，它接受 Redux 状态作为参数并返回从该状态派生的数据。砰！结束。

你的选择器正在做的是访问你的状态并从那里得到一些东西，可能在 React 组件中使用：

import { useSelector } from 'react-redux';
const App => () => {
  const user = useSelector(selectUser); 
  return <div>My name is {user.name}</div>
}