From 62a487f9cde103f5d9ae462634cc503b86c4ee04 Mon Sep 17 00:00:00 2001
From: Niccolo Lampa <37615906+niccololampa@users.noreply.github.com>
Date: Tue, 23 Oct 2018 20:30:30 +0800
Subject: [PATCH] new batch of redux challenge hints and solutions (#19691)
---
.../send-action-data-to-the-store/index.md | 40 ++++++++++-
.../index.md | 67 ++++++++++++++++++-
.../redux/write-a-counter-with-redux/index.md | 46 ++++++++++++-
3 files changed, 147 insertions(+), 6 deletions(-)
diff --git a/guide/english/certifications/front-end-libraries/redux/send-action-data-to-the-store/index.md b/guide/english/certifications/front-end-libraries/redux/send-action-data-to-the-store/index.md
index 533180a7e5..a8f0e3d05c 100644
--- a/guide/english/certifications/front-end-libraries/redux/send-action-data-to-the-store/index.md
+++ b/guide/english/certifications/front-end-libraries/redux/send-action-data-to-the-store/index.md
@@ -3,8 +3,44 @@ title: Send Action Data to the Store
---
## Send Action Data to the Store
-This is a stub. Help our community expand it.
+### 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.
-This quick style guide will help ensure your pull request gets accepted.
+### 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());
+```
diff --git a/guide/english/certifications/front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions/index.md b/guide/english/certifications/front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions/index.md
index 6805656123..c0b84f6932 100644
--- a/guide/english/certifications/front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions/index.md
+++ b/guide/english/certifications/front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions/index.md
@@ -3,8 +3,71 @@ title: Use Middleware to Handle Asynchronous Actions
---
## Use Middleware to Handle Asynchronous Actions
-This is a stub. Help our community expand it.
+### Hint 1
+Treat the ```dispatch``` argument as a function and pass the action events in it.
-This quick style guide will help ensure your pull request gets accepted.
+### 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)
+);
+```
diff --git a/guide/english/certifications/front-end-libraries/redux/write-a-counter-with-redux/index.md b/guide/english/certifications/front-end-libraries/redux/write-a-counter-with-redux/index.md
index 0067036e53..d87de7ab8b 100644
--- a/guide/english/certifications/front-end-libraries/redux/write-a-counter-with-redux/index.md
+++ b/guide/english/certifications/front-end-libraries/redux/write-a-counter-with-redux/index.md
@@ -3,8 +3,50 @@ title: Write a Counter with Redux
---
## Write a Counter with Redux
-This is a stub. Help our community expand it.
+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.
-This quick style guide will help ensure your pull request gets accepted.
+### 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);
+```