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

Top comments (0)