时间戳

首页 > 解决方案 > 反应 redux createSlice 或 createReducer

redux - 反应 redux createSlice 或 createReducer

问题描述

我是初学者，不知道 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,
  },
});

有人可以解释一下吗？我感到很困惑

标签： reduxreact-reduxredux-toolkit

解决方案

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

不知道 createSlice 和 createReducer 有没有区别。

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

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

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

一个重要的声明：

在内部，createSlice使用createActionand 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 ???

当您使用 Redux 查看应用程序时，选择器是一种非常常见的模式。

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

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

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

推荐阅读