react redux createSlice or createReducer

user_14595135 0
Viewed 7717

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

Which shoudl I choose ?.

Second of all, I watched a tutorial today. The guy just made a store.js file and a userslice.js file. Very Simple.

But he made it a bit different from the redux documentation. He exported three CONST at the end of the userSlice.js instead of two like in the documention. (I have made a comment) If I change state.user.user to state.user.wtf...... I will run in a error after a while, because some components do not have acess to the user object anymore.

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;

in app. js he made that command

 const user = useSelector(selectUser);

instead 

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

I really do nor understand the difference

store.js file

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

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

could somebody please explaine me that. I am so confused

react-redux redux-toolkit redux
1 Answers

Following the first part of your question about createSlice and createReducer:

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

A good source of help is to read the Redux Toolkit docs, where it says:

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.

An important statement:

Internally, createSlice uses createAction and createReducer, [...]

You can understand createSlice as a function which uses createReducer or a helper to bind things up.

About the second part of your question:

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

Selectors are a very common pattern found when you look into an app using 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.

What your selector is doing is accessing your state and get something from there, probably to use inside a React component:

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