reactClassComponentRedux

lucycodes42

In the code above, React is importing Component from react and react-redux. Next, it is exporting a class named ${1:filename}. ${1:filename} will be our component. Next, it is extending Component from react and creating a method named render(). Render() will be the method that will be invoked when the component is rendered.

Next, React is importing two functions from react-redux. First, mapStateToProps will be importing from react-redux and will be taking in state as an argument. Next, mapDispatchToProps will be importing from react-redux and will be taking in dispatch as an argument. Finally, ${1:filename} is exporting a function named connect(). Connect() will be taking in mapStateToProps and mapDispatchToProps and will be returning a new function named ${1:filename} which will be able to handle state and dispatch.

Library: react

Shortcut: rcredux

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class ${1:filename} extends Component {
  render() {
    return (
      <div>first</div>
    )
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(${1:filename})