React JS / Redux Tutorial – 9 – Actions and Action Creators



Facebook – https://www.facebook.com/TheNewBoston-464114846956315/
GitHub – https://github.com/buckyroberts
Google+ – https://plus.google.com/+BuckyRoberts
LinkedIn – https://www.linkedin.com/in/buckyroberts
reddit – https://www.reddit.com/r/thenewboston/
Support – https://www.patreon.com/thenewboston
thenewboston – https://thenewboston.com/
Twitter – https://twitter.com/bucky_roberts

Related Posts
Electron with webpack and Vue.js

Setup an Electron desktop app with webpack and Vue.js. electron-webpack: https://github.com/electron-userland/electron-webpack Code examples from this video: https://github.com/shama/letswritecode/tree/master/electron-webpack-vuejs

Building a universal/isomorphic web app with React.js

Learn how to make our server-side rendered app universal/isomorphic with React.js. We'll be using webpack@1 to build a client-side bundle Read more

Let's Build: With Ruby on Rails – Multitenancy Workout App – Configure VueJS and Views – Part 5

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun I design, code, Read more

41 thoughts on “React JS / Redux Tutorial – 9 – Actions and Action Creators”

  1. Funniest Redux tutorial on YouTube and I learned a lot too. Thanks for teaching Redux and entertaining us at the same time
    .

    Reply
  2. Thank you very much for this tutorial. It's making sense to me now after watching your tutorial. Other tutorials with react-redux uses BIG words and it's so hard to grasp

    Reply
  3. Did you end up getting that grilled cheese sandwich? Boston has these places called Roxy's which are pretty good. Otherwise Panera Bread is nationwide and make some decent standard cheese sandwiches.

    Reply
  4. jeez redux is like a skeleton with bones connected and there's a brain send them signal decide what to do, even on an event handler needs to be this complex. why….

    Reply
  5. In some cases, instead of fully defining the mapDispatchToProps function as you did, one can just pass an object as the second parameter to the connect function, containing all the action creators. Something like this:

    export default connect(mapStateToProps, { selectUser, someOtherActionCreator })(UserList);

    as opposed to this:

    function mapDispatchToProps(dispatch) {
    return bindActionCreators({selectUser}, dispatch);
    }
    export default connect(mapStateToProps, mapDispatchToProps)(UserList);

    Can someone help me confirm and explain this?​ In what cases can we use the shorter version, the one that doesn't need you to define the mapDispatchToProps? Thanks for any clarifications 😀

    Reply
  6. When you have an `index` file in a folder, you don't need to add its name to the import. So you can just:
    import { Lorem } from 'ipsum';

    instead of

    import { Lorem } from 'ipsum/index';

    Reply
  7. Hey, Bucky, do you mind if you could make a react/redux tutorial where you handle async data and make API calls and stuff? It would make your whole react/redux series absolutely golden, sir.

    Reply
  8. I am not sure but I think you don't need to use dispatch, since you have used bindActionCreators in your matchDispatchToProps . Indeed you don't need to wrap it with an another dispatch, bindActionCreators is a helper that enable action creators to directly dispatch actions. So I think you can just invoke your action creator and it should automatically dispatch the action. Anyway here is what i did and it got rid of that error in the dev console:

    //Pass in our functionality as a prop to hook it up
    //Dispatch is a way of calling the function
    function matchDispatchToProps(dispatch) {
    //Connect the function
    return bindActionCreators({
    //The function selectUser is equal to the function selectUser
    //We wrote
    selectUser: selectUser
    }, dispatch)
    }

    Reply
  9. Thank you for these videos, they helped me get started with redux. I'm working on this app and I'm wondering what the best way would be to pass multiple actions in bindactioncreators?

    Reply
  10. learning so much from these videos. thanks Bucky. except every time i watch one i keep thinking of that one video where you went off on a side note and told the story about that puss-filled chicken sandwich your friend bit into. i've been unable to eat any variety of chicken sandwich from any fast food restaurant since.

    Reply
  11. Thanks for your amazing tutorial, it helped me a lot, but I think it's better to use a light theme for IDE when you are recording tutorials, it will be much better to read codes. Thanks again.

    Reply

Leave a Comment