We'll cover more Redux actions, reducers, and a little bit of Redux Thunk so we can perform a POSTrequest or a getRequest rather to our server. We're also going to be learning about authentication tokens and how to use them on the client side. The client side being our front-end application. Server-side being the server.

In our client-side, we're going to start building out the action. What we want to do is click on requestsNew.js. When we submit a new request, it pushes us back to the dashboard. What we want it to do is perform a request, complete that request, and then push us back to the dashboard.

This is very similar to what we did with signin.js. We perform a request and then it pushes us back. Let's go to requestsNew.js and let's write that action in requests.js. We need a type to dispatch once we get the data back. We're actually not even going to have a type for this.

We're just going to go to the server and we're going to do it in a less efficient way where we just fetch them back after we add a new one. Which isn't really bad, but it is less efficient in a way. It will ensure that we get the exact data on the server every time which is better in my opinion.

Let's go ahead and let's create this action in our requests.js. We're going to say:

requests.js

export function createNewRequest(newRequest) {
    return function() {

    }
}

So this is middleware here and we're going to perform a post request. We need to import axios, we're also going to need a ROOT_URL:

requests.js

import axios from 'axios';
import { ROOT_URL } from '../config';

We are good there. Let's write out this request now, so let's say:

requests.js

export function createNewRequest(newRequest) {
    return function() {
        axios.post(`${ROOT_URL}/requests/new`)
            then(response => {
                console.log(response.data);
            })
            .catch(err => {
                console.log(err);
            })
    }
}

Then lets callback so we can push once we know it's successful. Let's pass in a callback called success and then we'll say success().

requests.js

export function createNewRequest(newRequest, success) {
    return function() {
        axios.post(`${ROOT_URL}/requests/new`)
            then(response => {
                console.log(response.data);
                success();
            })
            .catch(err => {
                console.log(err);
            })
    }
}

After we post this if it succeeds, what's going to happen is it's going to call our callback. The reason that is good is because then it will only call if we succeed. If we call err it won't cause success, so that in here when it runs we can say "hey, go to the dashboard if it succeeds."

If it doesn't stay on that page and display an error or something. That's the logic behind that. That's the request. That's the action creator. What we want to do now is we want to learn about how we can pass this in. Then we need to talk about headers for the authentication. Let's pass in the newRequest.

requests.js

export function createNewRequest(newRequest, success) {
    return function() {
        axios.post(`${ROOT_URL}/requests/new`, newRequest)
            then(response => {
                console.log(response.data);
                success();
            })
            .catch(err => {
                console.log(err);
            })
    }
}

Now what we need to do is provide a header. We will learn how to do that in the next video. In the next video, we will perform the POSTrequest and see if it saves to our database or local database.

Let's commit our code. Let's say git status, git add ., and let's say git commit -m "build create new request action creator with redux-thunk middleware". I'll see you in the next video.

Resources

• Source Code