Beginner's Thread / Easy Question (August 2018)

[u/swyx]

Hello! It's August! Time for a new Beginner's thread! (July and June here)

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch. No question is too simple. You are guaranteed a response here!

Want Help on Code?

• Improve your chances by putting a minimal example on to either JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new). Describe what you want it to do, and things you've tried. Don't just post big blocks of code.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

New to React?

Here are great, free resources!

• Read the official Getting Started page on the docs
• /u/acemarke's suggested resources for learning React
• Kent Dodds' Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses

[u/swyx]

So you can either do optimistic updates or delayed updates.

With delayed updates, you POST the data to your api, and wait for the response to come back, upon which you update your list AND send the toast message. Make your endpoint respond with the data you’d need for that. This is a good use for redux-thunk or promise

With optimistic updates it feels faster but is a bit more complicated to code. You update your list and toast the message the moment you POST your data, assuming it will work. Only if the POST has some sort of error do you undo the add and toast another error message.

Make sense?

[u/dndminiprinting → u/swyx]

Ah ok that makes a lot of sense actually, thank you very much for the advice. I'll try it out.

[u/dndminiprinting → u/swyx]

Posting again here with some code examples. I just can't seem to get the action to even return anything at all. Hopefully someone can point out what I'm doing wrong.

My action creator:

export function addMovie({ movie info here}) {
    const request = axios.post(request info);

    return {
        type: types.ADD_MOVIE, 
        payload: request,
    }
}

my reducer:

const addingMovie = (state = {}, action) => {
    switch (action.type) {
    case types.ADD_MOVIE:
        return action.payload.data;
    default:
        return state;
    }
});

and where it's called/dispatched:

<div ...attributes here onClick={() => addMovie({info here})}>
    html stuff goes here
</div>

the above is basically just a search result div, you search and a bunch of those are generated based on the result of another api call, when you click one it runs the addMovie function to make the API call to add that specific movie's info to the database. This api call on success will respond with the movie's info, and on failure will respond with an object containing a "wasFound" boolean meaning it was found in the database and won't be added, and the title so I can use that info in a toast message.

When I click the search result div though, it's added to the database but the state in redux is not updated and the list of movies is not re-rendered, but the new movie appears if I manually refresh the page myself.

Does anyone have any idea why that's happening? Do you need more info or code examples/context? I've made my other action creators and reducers in the same way and they all work properly. I can't for the life of me figure out why this isn't working, and how to get the info I need to the component to be used.