createStore()
method.
In order to let us combine multiple reducers together, Redux provides the combineReducers()
method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state.
Typically, it is a good practice to create a reducer for each piece of application state when they are distinct or unique in some way. For example, in a note-taking app with user authentication, one reducer could handle authentication while another handles the text and notes that the user is submitting. For such an application, we might write the combineReducers()
method like this:
const rootReducer = Redux.combineReducers({Now, the key
auth: authenticationReducer,
notes: notesReducer
});
notes
will contain all of the state associated with our notes and handled by our notesReducer
. This is how multiple reducers can be composed to manage more complex application state. In this example, the state held in the Redux store would then be a single object containing auth
and notes
properties.
counterReducer()
and authReducer()
functions provided in the code editor, along with a Redux store. Finish writing the rootReducer()
function using the Redux.combineReducers()
method. Assign counterReducer
to a key called count
and authReducer
to a key called auth
.
counterReducer
should increment and decrement the state
.
testString: 'assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1 })(), ''The counterReducer
should increment and decrement the state
.'');'
- text: The authReducer
should toggle the state
of authenticated
between true
and false
.
testString: 'assert((function() { store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false })(), ''The authReducer
should toggle the state
of authenticated
between true
and false
.'');'
- text: 'The store state
should have two keys: count
, which holds a number, and auth
, which holds an object. The auth
object should have a property of authenticated
, which holds a boolean.'
testString: "assert((function() { const state = store.getState(); return typeof state.auth === 'object' && typeof state.auth.authenticated === 'boolean' && typeof state.count === 'number' })(), 'The store state
should have two keys: count
, which holds a number, and auth
, which holds an object. The auth
object should have a property of authenticated
, which holds a boolean.');"
- text: The rootReducer
should be a function that combines the counterReducer
and the authReducer
.
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers') })(), 'The rootReducer
should be a function that combines the counterReducer
and the authReducer
.');
```