Using nested objects in redux initial state and reducers - reactjs

Question

I have dashboard that have a sections which is separated by react-router.
Sections are:
Categories
Exams
Reports
Lets take a look at Exam section. we have this state as the initial state.
{
ID: null,
RandomizeQuestions: false,
RandomizeAnswers: false,
Pages: [
{
ID: 1,
Title: 'Page one',
Blocks: [
{
ID: 1,
Title: 'Block One',
Questions: [
{
ID: 1,
Title: "Quesiton title is here",
Answers: [
{
ID: 1,
Title: "Answer 1"
},
{
ID: 2,
Title: "Answer 2"
}
]
}
]
}
]
}
]
}
I know that the state should be flatten and normalized when I use redux. but that is my exact problem. if i try to normalize my state it should be like this :
{
Exam: {
ID: null,
RandomizeQuestions: false,
RandomizeAnswers: false
},
ExamPages: [
{
ExamId: 1,
ID: 1,
Title: 'Page One'
}
],
ExamBlocks: [
{
ID: 1,
Title: 'The New Block',
Questions: []
}
],
ExamQuestions: [],
ExamAnswers: []
}
lets assume that its ok and I wont have problem with it. but when happen to the other sections ?
Categories have its own states which is big too and report too. ( there are other section that I didn't mention )
and then my combineReducer would be looks like this :
import {combineReducers} from 'redux'
import Exam from './redc.exams.jsx'
import ExamBlocks from './redc.blocks.jsx'
const rootReducer = combineReducers({
Exam,
ExamBlocks
})
export default rootReducer
and of course I should have a reducer for every array in that object.
so my main question is how can I at lest have this structure:
const initialState = {
Exams: {
Blocks: [],
Questions: [],
Answers: []
},
Categories: {
Menus: [],
Users: []
},
Report: {
MainReports: [],
SideReports: []
}
}
remember that I want to have separate reducers for each of them.
a reducer for Blocks , reducer for Questions and so on...
UPDATE #1
I tried #Tom Fenech said in the answers but cannot combine reducers before final combineReducers.
right now my root reducers is looks like this:
import {combineReducers} from 'redux'
//Exams
import Exams from './ExamsReducers/redc.exams.jsx'
import Blocks from './ExamsReducers/redc.blocks.jsx'
//Categories
import Categories from './CategoriesReducers/redc.categories.jsx'
const rootReducer = combineReducers({
Exams,
Categories,
Blocks,
})
export default rootReducer
I tried with what he says and here is my code after the changes:
import {combineReducers} from 'redux'
//Exams
import Exams from './ExamsReducers/redc.exams.jsx'
import Blocks from './ExamsReducers/redc.blocks.jsx'
//Categories
import Categories from './CategoriesReducers/redc.categories.jsx'
const examRedc = combineReducers(Exams,Blocks )
const catsRedc = combineReducers(Categories)
const rootReducer = combineReducers(examRedc, catsRedc)
export default rootReducer
i get this error :
Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
and when i log the state in one of the components like this
var mapDispatchToProps = function (dispatch) {
return {
AddBlock: function () {
dispatch(addBlock());
}
}
};
const mapStateToProps = function (state) {
console.log(state); //////HERE
return {Blocks: state.Blocks};
}
export default connect(mapStateToProps, mapDispatchToProps)(Blocks)
I get this state which is not what I want finally.

Answer 1

I don't think there's any need to have Blocks, Questions and Answers inside of Exams. I would suggest something like this at the top level:
{
Exams: {
[ID]: {
ID: string,
RandomizeQuestions: boolean,
RandomizeAnswers: boolean,
Blocks: string[] // array of block IDs
}
}
Blocks: {
[ID]: {
ID: string,
Title: string,
Questions: string[] // array of question IDs
}
},
Questions: // etc.
}
Now, instead of storing the nested objects, we just store their ID to keep track of ownership.
This state would be created with:
state = combineReducers({
examsReducer,
blocksReducer,
// ...more reducers
})
If you want to split the overall state into sections, you could use something like this:
const examStuff = combineReducers({
examsReducer,
blocksReducer,
// ...
});
const categoryStuff = combineReducers({
categoriesReducer,
menusReducer,
// ...
});
const state = combineReducers({
examStuff,
categoryStuff
});
Then state would be:
{
examStuff: {} // the object defined at the top of question,
categoryStuff: {},
otherStuff: {}
}

Answer 2

You can have nested reducer structure like
// block_reducer.js
export const reducer = (state = [], action) => {
switch (action.type) {
case BLOCK_ACTION:
return [{a:1}, {b:2}]
}
return state
}
// exam_reducer.js
import {combineReducers} from 'redux'
import {reducer as BlockReducer} from './block_reducer'
export const reducer = combineReducers({
Blocks: BlockReducer,
Sections: .....,
Answers: .......
})
// root_reducer.js
import {combineReducers} from 'redux'
import {reducer as examReducers} from './exam_reducers'
export const reducer = combineReducers({
Exams: examReducers,
Categories: .....,
Report: ......
})