My struggle to learn React

Re:My struggle to learn React by pg_bot on Wednesday May 09, 2018 @06:35PM (#17034851)

I only use classes when I need to use a ref within a component (which is quite rare). I use redux for all my state management instead of storing state within the component itself. Everything else is a stateless functional component. A typical component would look like

    import React from "react";
    import { connect } from "react-redux";

    function _HelloWorld({name}) {
      return <div className="intro">{name}</div>
    }

    function mapState(state, ownProps) {
      return {
        name: state.name
      }
    }
   
    function mapDispatch(dispatch, ownProps) {
      return {}
    }

    export const HelloWorld = connect(mapState, mapDispatch)(_HelloWorld)

[ Parent | on HN ]

Re:My struggle to learn React by acemarke on Wednesday May 09, 2018 @07:12PM (#17035109)

I realize this is just a snippet and probably written off the top of your head (rather than reflecting real code), but a couple quick suggestions for improvement there:

- Only add the `ownProps` argument to `mapState` or `mapDispatch` if you actually need it, because `connect()` will now call those functions more often (whenever the incoming props have changed). If you're not actually _using_ values from `ownProps` in there, don't add those arguments.

- The `mapDispatch` function isn't doing anything at all in that example, and can be omitted completely

- I personally recommend using the "object shorthand" form of `mapDispatch` instead. To me, there's never actually a good reason to write a separate `mapDispatch` function. Just write action creators, and pass them in an object to `connect`, like this:

    import {addTodo, toggleTodo} from "./todoActions";
    
    const actionCreators = {addTodo, toggleTodo};
    
    export default connect(mapState, actionCreators)(TodoList);

[ Parent | on HN ]

Re:My struggle to learn React by ilikehurdles on Wednesday May 09, 2018 @10:09PM (#17035931)

I see. I don't really have a need for redux but that clarifies things.

[ Parent | on HN ]