Combine Reducers in Redux | React Redux | Doctor Booking React JS App | React JS | Day- 16

The most common state shape for a Redux app is a plain Javascript object containing "slices" of domain-specific data at each top-level key. Similarly, the most common approach to writing reducer logic for that state shape is to have "slice reducer" functions, each with the same (state, action) signature, and each responsible for managing all updates to that specific slice of state. Multiple slice reducers can respond to the same action, independently update their own slice as needed, and the updated slices are combined into the new state object.

Because this pattern is so common, Redux provides the combineReducers utility to implement that behavior. It is an example of a higher-order reducer, which takes an object full of slice reducer functions, and returns a new reducer function.

In this React JS project, we'll be building a complete Doctor booking App using ReactJS.This Doctor booking App will have following features/learnings -

✅ App setup
✅ API setup
✅ UI creation using styled-components
✅ Debouncing implementation
✅ Component based development
✅ Responsive UI using Flex Concept
✅ API integration with axios
✅ Book consultation with video call
✅ Validation using Formik

00:00 Introduction
00:51 Creating the reducer
02:12 Adding reducers in rootReducer
03:00 Importing all the reducers
03:55 Adding CombinedReducers
05:30 Importing rootReducers

combineReducers takes an object full of slice reducer functions, and creates a function that outputs a corresponding state object with the same keys. This means that if no preloaded state is provided to createStore, the naming of the keys in the input slice reducer object will define the naming of the keys in the output state object. The correlation between these names is not always apparent, especially when using ES6 features such as default module exports and object literal shorthands.

#reactjs #combinedReducers #reacttutorial #reactjsbeginners #jasacadamy