Combining reducers with Object.create(null) initial state
Combine multiple reducers each initialized with state from Object.create(null), for a clean and secure combined state object.
function combineReducers(reducers) {
return function(state = {}, action) {
return Object.keys(reducers).reduce((nextState, key) => {
nextState[key] = reducers[key](state[key], action);
return nextState;
}, Object.create(null));
};
}
Defines a `combineReducers` function that takes an object of reducers and combines them into a single reducer function. The combined reducer updates each slice of state with the corresponding reducer and initializes the state with `Object.create(null)` for a clean prototype-free object.
function todosReducer(state = Object.create(null), action) {
switch (action.type) {
case 'ADD_TODO':
// logic for adding todo
break;
// other cases
default:
return state;
}
}
Defines a reducer `todosReducer` which handles actions related to todos. It initializes its state with `Object.create(null)` instead of a regular object literal.
function counterReducer(state = Object.create(null), action) {
switch (action.type) {
case 'INCREMENT':
state.count = (state.count || 0) + 1;
break;
case 'DECREMENT':
state.count = (state.count || 0) - 1;
break;
default:
return state;
}
return {...state};
}
Defines a reducer `counterReducer` which handles increment and decrement actions. State is initialized with `Object.create(null)` and ensures immutability by returning a shallow copy of the state.
const rootReducer = combineReducers({
todos: todosReducer,
counter: counterReducer
});
Combines the `todosReducer` and `counterReducer` into a single `rootReducer` using `combineReducers`. This will create a state object with the respective slices for todos and counter.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reducer Example</title>
</head>
<body>
<!-- Your HTML Structure -->
<script src="example.js"></script>
</body>
</html>
Basic HTML structure to include the JavaScript code that will use our root reducer.
body {
/* CSS styles if needed */
}
CSS styles that could be used for styling the HTML elements.