Show HN: Build your first real world React.js application

Re:Show HN: Build your first real world React.js application by ht85 on Wednesday September 07, 2016 @02:51PM (#12445982)

> when you can just have real functions doing setState() updates on the relevant component

Using Redux, all or almost all of your state is stored in a global repository (the "store").

Those strings should probably be constants instead, especially for IDE auto-complete purpose, but you are never generating those manually.

Instead, your components would call "action creators", who are properly named functions, which in turn will dispatch one or several actions to the store.

In your component:

    actions.changeLocation(someLocation)

In your action creator:

    changeLocation(location) {
        dispatch({
            type: CONSTANTS.CHANGE_LOCATION,
            payload: { location },
        });
    }

[ Parent | on HN ]

Re:Show HN: Build your first real world React.js application by hamandcheese on Wednesday September 07, 2016 @04:57PM (#12447603)

Is it acceptable to dispatch inside your action creators? I'm somewhat new to redux but I got the impression that dispatch should be used inside mapDispatchToProps.

[ Parent | on HN ]

Re:Show HN: Build your first real world React.js application by yawgmoth on Wednesday September 07, 2016 @05:45PM (#12448067)

It's an example of the thunk pattern. Thunks are used when you have an async call, e.g. getFoos. Then your action creator would be

  function requestFoos() {
    return { type: REQ_FOOS }
  }

  function gotFoos(foos) {
    return { type: GOT_FOOS, foos }
  }

  export function getFoos() {
    return function(dispatch) { 
      dispatch(requestFoos());
      myFooProvider
        .getFoos()
        .then(function(foos) { dispatch(gotFoos(foos)); });
    }
  }

Really useful for writing reducers that want to keep track of when you're fetching data from the server.

[ Parent | on HN ]

Re:Show HN: Build your first real world React.js application by hamandcheese on Thursday September 08, 2016 @01:56PM (#12455385)

Yes, but in the parent comment a thunk wasn't being dispatched, but rather a closure around some unknown dispatch function is being called.

[ Parent | on HN ]

Re:Show HN: Build your first real world React.js application by sixo on Wednesday September 07, 2016 @08:31PM (#12449255)

I found that redux only made sense once I started using redux-thunk to dispatch and handle quite a bit of logic inside the action-creators.

[ Parent | on HN ]

Re:Show HN: Build your first real world React.js application by hamandcheese on Thursday September 08, 2016 @01:57PM (#12455408)

My question was because if you look closely it isn't actually a thunk.

[ Parent | on HN ]