new batch of redux challenge hints and solutions (#19691)
This commit is contained in:
@ -3,8 +3,44 @@ title: Send Action Data to the Store
|
|||||||
---
|
---
|
||||||
## Send Action Data to the Store
|
## Send Action Data to the Store
|
||||||
|
|
||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/send-action-data-to-the-store/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
### Hint 1
|
||||||
|
Remember that in Redux, action creator functions return action objects. Objects can hold multiple values. The action object in ```addNoteText``` should contain both type and text variables. Figure out the corresponding value to pass for each of the variables in the object.
|
||||||
|
|
||||||
<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
|
||||||
|
In the ```notesReducer``` function, create a case condition that checks for the ```type``` of action and returns the value of ```text``` from the ```addNoteText``` function.
|
||||||
|
|
||||||
|
### Solution
|
||||||
|
```javascript
|
||||||
|
const ADD_NOTE = 'ADD_NOTE';
|
||||||
|
|
||||||
|
const notesReducer = (state = 'Initial State', action) => {
|
||||||
|
switch(action.type) {
|
||||||
|
// change code below this line
|
||||||
|
|
||||||
|
case ADD_NOTE:
|
||||||
|
return action.text;
|
||||||
|
|
||||||
|
// change code above this line
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addNoteText = (note) => {
|
||||||
|
// change code below this line
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: ADD_NOTE,
|
||||||
|
text: note
|
||||||
|
}
|
||||||
|
|
||||||
|
// change code above this line
|
||||||
|
};
|
||||||
|
|
||||||
|
const store = Redux.createStore(notesReducer);
|
||||||
|
|
||||||
|
console.log(store.getState());
|
||||||
|
store.dispatch(addNoteText('Hello!'));
|
||||||
|
console.log(store.getState());
|
||||||
|
```
|
||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||||
|
@ -3,8 +3,71 @@ title: Use Middleware to Handle Asynchronous Actions
|
|||||||
---
|
---
|
||||||
## Use Middleware to Handle Asynchronous Actions
|
## Use Middleware to Handle Asynchronous Actions
|
||||||
|
|
||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
### Hint 1
|
||||||
|
Treat the ```dispatch``` argument as a function and pass the action events in it.
|
||||||
|
|
||||||
<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
|
||||||
|
The ```requestingData``` action event will be passed first.
|
||||||
|
|
||||||
|
### Hint 3
|
||||||
|
The ```receivedData``` action event will be passed after the ```setTimeout``` function.
|
||||||
|
|
||||||
|
This sequence simulates the process of requesting the data, receiving the data and then dispatching the received data.
|
||||||
|
|
||||||
|
### Hint 4
|
||||||
|
It is important that the ```data``` variable be passed as an argument of ```receivedData```.
|
||||||
|
|
||||||
|
### Solution
|
||||||
|
```javascript
|
||||||
|
const REQUESTING_DATA = 'REQUESTING_DATA'
|
||||||
|
const RECEIVED_DATA = 'RECEIVED_DATA'
|
||||||
|
|
||||||
|
const requestingData = () => { return {type: REQUESTING_DATA} }
|
||||||
|
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }
|
||||||
|
|
||||||
|
const handleAsync = () => {
|
||||||
|
return function(dispatch) {
|
||||||
|
// dispatch request action here
|
||||||
|
|
||||||
|
dispatch(requestingData());
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
let data = {
|
||||||
|
users: ['Jeff', 'William', 'Alice']
|
||||||
|
}
|
||||||
|
// dispatch received data action here
|
||||||
|
|
||||||
|
dispatch(receivedData(data));
|
||||||
|
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultState = {
|
||||||
|
fetching: false,
|
||||||
|
users: []
|
||||||
|
};
|
||||||
|
|
||||||
|
const asyncDataReducer = (state = defaultState, action) => {
|
||||||
|
switch(action.type) {
|
||||||
|
case REQUESTING_DATA:
|
||||||
|
return {
|
||||||
|
fetching: true,
|
||||||
|
users: []
|
||||||
|
}
|
||||||
|
case RECEIVED_DATA:
|
||||||
|
return {
|
||||||
|
fetching: false,
|
||||||
|
users: action.users
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const store = Redux.createStore(
|
||||||
|
asyncDataReducer,
|
||||||
|
Redux.applyMiddleware(ReduxThunk.default)
|
||||||
|
);
|
||||||
|
```
|
||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||||
|
@ -3,8 +3,50 @@ title: Write a Counter with Redux
|
|||||||
---
|
---
|
||||||
## Write a Counter with Redux
|
## Write a Counter with Redux
|
||||||
|
|
||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/write-a-counter-with-redux/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
The goal of this challenge is to apply all the concepts learned from previous Redux challenges and create a simple counter that will increment or decrement a state by 1.
|
||||||
|
|
||||||
<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
|
||||||
|
The best way to solve this challenge is by reviewing previous redux lessons particularly the following:
|
||||||
|
- [Use const for Action Types](https://learn.freecodecamp.org/front-end-libraries/redux/use-const-for-action-types/)
|
||||||
|
- [Use a Switch Statement to Handle Multiple Actions](https://learn.freecodecamp.org/front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions/)
|
||||||
|
- [Define an Action Creator](https://learn.freecodecamp.org/front-end-libraries/redux/define-an-action-creator/)
|
||||||
|
- [Handle an Action in the Store](https://learn.freecodecamp.org/front-end-libraries/redux/handle-an-action-in-the-store/)
|
||||||
|
- [Create a Redux Store](https://learn.freecodecamp.org/front-end-libraries/redux/create-a-redux-store)
|
||||||
|
|
||||||
|
### Solution
|
||||||
|
```javascript
|
||||||
|
const INCREMENT = 'INCREMENT'; // define a constant for increment action types
|
||||||
|
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types
|
||||||
|
|
||||||
|
// define the counter reducer which will increment or decrement the state based on the action it receives
|
||||||
|
const counterReducer = (state = 0, action) => {
|
||||||
|
switch(action.type){
|
||||||
|
case INCREMENT:
|
||||||
|
return state+=1;
|
||||||
|
|
||||||
|
case DECREMENT:
|
||||||
|
return state-=1;
|
||||||
|
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
} ;
|
||||||
|
|
||||||
|
// define an action creator for incrementing
|
||||||
|
const incAction = () => {
|
||||||
|
return {
|
||||||
|
type: INCREMENT
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// define an action creator for decrementing
|
||||||
|
const decAction = () => {
|
||||||
|
return {
|
||||||
|
type: DECREMENT
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// define the Redux store here, passing in your reducers
|
||||||
|
const store = Redux.createStore(counterReducer);
|
||||||
|
```
|
||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
<!-- 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