Added hints and solutions to Redux exercises (#19576)
* added hints and solutions to exercise * added hints and solutions to problem
This commit is contained in:
committed by
Randell Dawson
parent
43573fca2c
commit
35e2800af7
@ -3,8 +3,17 @@ title: Combine Multiple Reducers
|
||||
---
|
||||
## Combine Multiple Reducers
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/combine-multiple-reducers/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
The goal of this challenge is to combine two reducers into a single reducer which will be passed into the ```Redux.createStore()``` method.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
### Hint 1
|
||||
Use the method ```Redux.combineReducers()```. Pass an object as an argument.
|
||||
|
||||
### Hint 2
|
||||
The object should have two ```name:value``` pairs. The ```value``` corresponds to the reducer function
|
||||
|
||||
### Solution
|
||||
```javascript
|
||||
// define the root reducer here
|
||||
const rootReducer = Redux.combineReducers({count:counterReducer, auth:authReducer})
|
||||
```
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
@ -5,8 +5,54 @@ title: Use a Switch Statement to Handle Multiple Actions
|
||||
|
||||
Tip: Make sure you don't use "break" commands after return statements within the switch cases.
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
### Hint 1
|
||||
Specific actions will be passed into the reducer function. Look at the action creator functions (e.g. loginUser) to see what values you will need to check for in your switch case statements.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
### Hint 2
|
||||
Each case condition should return an updated authenticated property object.
|
||||
|
||||
### Hint 3
|
||||
Do not forget to include a default case in your statement which returns the defaultState.
|
||||
|
||||
### Solution
|
||||
```javascript
|
||||
const defaultState = {
|
||||
authenticated: false
|
||||
};
|
||||
|
||||
const authReducer = (state = defaultState, action) => {
|
||||
|
||||
// change code below this line
|
||||
switch(action.type){
|
||||
|
||||
case 'LOGIN':
|
||||
return {
|
||||
authenticated: true
|
||||
};
|
||||
|
||||
case 'LOGOUT':
|
||||
return {
|
||||
authenticated: false
|
||||
};
|
||||
|
||||
default:
|
||||
return defaultState;
|
||||
}
|
||||
// change code above this line
|
||||
};
|
||||
|
||||
const store = Redux.createStore(authReducer);
|
||||
|
||||
const loginUser = () => {
|
||||
return {
|
||||
type: 'LOGIN'
|
||||
}
|
||||
};
|
||||
|
||||
const logoutUser = () => {
|
||||
return {
|
||||
type: 'LOGOUT'
|
||||
}
|
||||
};
|
||||
```
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
Reference in New Issue
Block a user