5 Neat Things About 

React 

Redux

and 

The es6 arrow makes for better function declarations attached to a class 

1

class Person extends Component {
  


  render() {
    
    noWay(args ) {

    }

    ohYes = (args) => {
     const {dispatch} = this.props //HANDY!
    }

    return (
      <div content>
       <button onClick={noWay.bind(this)} />
       <button onClick={ohYes} />
      </div>
    );
  }
}

The Decorator syntax is much nicer for HOC

2

export default withRouter(
  connect(function(state) {
    return {
      user: state.user
    };
  })(User)
);
@withRouter
@connect(connectToState)
@withStyles(styles)
export default class Submission extends Component {

Consider HOC for refactoring busy components.

3

export const withSomething = ComposedComponent =>
  class extends Component {
    state = {
      something: null,
      fetching: false
    };
    somethingPromise= null;
    componentDidMount() {
      const ctx = this;
      if (ctx.somethingPromise) {
        ctx.setState({
          fetching: true
        });
        ctx.somethingPromise.then(something=> {
          ctx.setState({
            something: something,
            fetching: false
          });
        });
      }
    }
    componentWillMount() {
      if (!this.state.something) {
        this.somethingPromise= getSomething();
      }
    }
    render() {
      return (
        <ComposedComponent
          {...this.props}
          something={this.state.something}
          fetching={this.state.fetching}
        />
      );
    }
  };
@withSomething
export default class Whatever extends Component

Consider not using switch for your reducers

4

const reducers = {
  UPDATE_WHO: (state, value) => {
    return {...state, ...value};
  },
  UPDATE_WHO_FIRSTNAME: (state, value) => {
    return { ...state, ...{ firstname: value } };
  },
  UPDATE_WHO_LASTNAME: (state, value) => {
    return {...state, ...{ lastname: value } };
  },
};

const who = (state = {}, action) => {
  if (reducers[action.type]) {
    return reducers[action.type](state, action.value);
  }

  return state;
};

export who
function who(state = 0, action) {
  switch (action.type) {
  case 'UPDATE_WHO':
    return {...state, ...action.value}
  case 'UPDATE_WHO_FIRSTNAME':
    return {...state, ...{ lastname: action.value } }
  case 'UPDATE_WHO_LASTNAME':
    return {...state, ...{ lastname: action.value } }
  default:
    return state
  }
}

export who

Dispatch is a

5

Actions are 

React is a

catapult

mountain

Components are

huts

packages

5 Neat React and Redux Things

By Jesse Harlin

5 Neat React and Redux Things

Just 5 things I wanna share with ya'll about the react and the redux

  • 850
Loading comments...

More from Jesse Harlin