CODEWITHSUNDEEP
reduxreact-reduxredux-toolkit
daniel ragimov
daniel ragimov

Reputation: 235

react redux createSlice or createReducer

What is the difference between createSlice and createReducer? Which one I shall use?

I did some research and watched a tutorial today. The tutorial didn't solve my confusion, maybe because it's a bit different from the redux documentation.

The author 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.<something_else> I will run into an error after a while because some components do not have access to the user object anymore.

userSlice.js

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; 
    
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 explain this?

Upvotes: 17

Views: 19383

Answers (1)

richardaum
richardaum

Reputation: 6777

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

Upvotes: 32

Related Questions