Reputation: 357
I have three reducers
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?
Upvotes: 8
Views: 5560
Reputation: 76
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);
Upvotes: 0
Reputation: 282160
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 tocreateStore
.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.
Upvotes: 11