Shall we use multiple combine reducers? - reactjs

Question

I have three reducers
Home
Listing
Detail
I have one combine reducer for above three. But I want to divide project structure into multiple reducers. Is it a good practice to have multiple combine reducer in the project?

Answer 1

Yes, you can have multiple combineReducers in your App, You can at the top level combine reducers Home , Listing and Detail and even split each individual reducers into multiple and combine them into one.
According to the Redux docs:
You may call combineReducers at any level of the reducer hierarchy.
It doesn't have to happen at the top. In fact you may use it again to
split the child reducers that get too complicated into independent
grandchildren, and so on.
Some more description about combineReducer:
As your app grows more complex, you'll want to split your reducing
function into separate functions, each managing independent parts of
the state.
The combineReducers helper function turns an object whose values are
different reducing functions into a single reducing function you can
pass to createStore.
The resulting reducer calls every child reducer, and gathers their
results into a single state object. The shape of the state object
matches the keys of the passed reducers.

Answer 2

Yes, you can combine multi reducer and use it as one store,
Firstly, you should import all reducers in a new file. then, combine all reducers with combine-reducer technics,like this:
import { combineReducers } from 'redux';
import {Home,Listing,Detail} from '*/**';
const rootReducer = combineReducers({
Home,
Listing,
Detail
})
export default rootReducer
Secondly, import the new file in Store file and create your store with combined-reducer
import { createStore } from 'redux'
import rootReducer from '*/combinestores'
const store = createStore(rootReducer)
console.log(store.getState())optinal
export default store
In the end, in your container you can use your store like this :
(but before it, you should be sure send store as props to Containers)
const mapStateToProps = state => {
return{
*name of your var* : state.Home.*,
*name of your var* : state.Detail.* /*then you can use this var as props anywhere you need*/
}
}
const mapDispatchToProps = dispatch => {
return{
*name of your var* : () => dispatch ( *name of your func*()),
*name of your var* : () => dispatch ( *name of your func*())
}
}
export default connect(mapStateToProps,mapDispatchToProps)(name of func);