反应 redux createSlice 或 createReducer

Question

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

我应该选择哪个？

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

但是他做的和redux的文档有点不一样。他在 userSlice.js 的末尾导出了三个 CONST，而不是文档中的两个。（我发表了评论）如果我将 state.user.user 更改为 state.user.wtf...... 一段时间后我会运行出错，因为某些组件不再具有访问用户对象的权限。

userSlice

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 and createReducer 的问题的第一部分：

I do not know if there is a difference between createSlice and createReducer.

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

createSlice: A function that accepts an initial state, an object full of reducer functions, and a "slice name", and automatically generates action creators and action types that correspond to the reducers and state.

createReducer: A utility that simplifies creating Redux reducer functions. It uses Immer internally to drastically simplify immutable update logic by writing "mutative" code in your reducers, and supports directly mapping specific action types to case reducer functions that will update the state when that action is dispatched.

重要声明：

Internally, createSlice uses createAction and 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 的应用程序时发现的一种非常常见的模式。

A “selector” is simply a function that accepts Redux state as an argument and returns data that is derived from that state. Bam! The end.

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

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

反应 redux createSlice 或 createReducer

react redux createSlice or createReducer

redux

react-redux

redux-toolkit