DEV Community

Cover image for combineReducers in redux
khaled-17
khaled-17

Posted on

combineReducers in redux

Do you remember the counter **Reducer **we wrote in the counter lesson?
What if I want to add another one,
for example, to the login status

Let him look at him again

const counterReducer = (state = 1, action) => {

    console.log(action);
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;

        default:
            return state;
    }
};
export default counterReducer;

Enter fullscreen mode Exit fullscreen mode

The *Reducer *, my friends, is the place where the data in the word state
And the way we will change the data
In the switch code

add LoginReducer.js to reducer folder

export default function LoginReducer(state =false, action) {
  switch (action.type) {
    case 'LOGIN':
      return true
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
Enter fullscreen mode Exit fullscreen mode

IN action.js to actionfolder

//the old code
 export const increment = () => ({ type: 'INCREMENT', payload: 1 });
export const decrement = () => ({ type: 'DECREMENT', payload: 1 });

//we add this code 
export const logIn = () => ({ type: 'LOGIN' });
export const logOUt = () => ({ type: 'LOGOUT'});


Enter fullscreen mode Exit fullscreen mode

Note that we did not add the value of x here
Is this permissible? Yes
I can add it as well if you want, but here I wanted to tell you that yes, you can not add a value to payload

Because I have configured it in LoginReducer.js, please note the code in LoginReducer.js

Finally, create a file allReducers.js in Reducers folder

ther are many articles ,including official documenter called thes file index.js
but This makes me nervous
Because the Reikat project already has a file called index

import { combineReducers } from 'redux'
import LoginReducer from './LoginReducer'
import reducer from './reducer'

export default combineReducers({
    LoginReducer,
    reducer
})
Enter fullscreen mode Exit fullscreen mode

Image description

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay