react-redux-snippets

snippets.cson

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson
'.source.js':
  'Container-File':
    'prefix': 'redux-c'
    'body': """
      import { connect } from 'react-redux'
      import { ActionCreators as Actions } from '../actions'
      import { Selectors } from '../reducers'
      import { toJS } from '../lib'
      import $1 from '../components/$1'

      const mapStateToProps = state => ({
        selected: Selectors.selected(state)
      })

      const mapDispatchToProps = dispatch => ({
        myAction: args => dispatch(Actions.myAction(args))
      })

      export default connect(mapStateToProps, mapDispatchToProps)(toJS($1))
    """
  'Component-File':
    'prefix': 'react-c'
    'body': """
      import React, { Component } from 'react'
      import './$1.css'

      export default class $1 extends Component {
        constructor (props) {
          super(props)
          this.state = {}
        }

        componentDidMount () {

        }

        render () {
          const {} = this.props
          const {} = this.state

          return null
        }
      }
    """
  'Action-File':
    'prefix': 'redux-a'
    'body': """
      import { createAction } from 'redux-actions'

      const ActionTypes = {
        MY_ACTION: 'MY_ACTION'
      }

      // Action creators.
      const myAction = createAction(ActionTypes.MY_ACTION, args => {
        return { args }
      })

      const ActionCreators = {
        myAction
      }

      export { ActionTypes, ActionCreators }
    """
  'Reducer-File':
    'prefix': 'redux-r'
    'body': """
      import { Map } from 'immutable'
      import { combineActions, handleActions } from 'redux-actions'
      import { ActionTypes as Actions } from '../actions'
      import { getVal as getValDeep } from '../lib'

      const initialState = Map({
        selected: ''
      })

      // Selectors.
      const absolutePath = ['$1']
      const getVal = (state, key) => getValDeep(state, absolutePath, key)

      export const Selectors = {
        mySelector: state => getVal(state, 'selected')
      }

      const actions = [
        Actions.MY_ACTION
      ]

      // Combined reducer.
      export default handleActions({
        [combineActions(...actions)]: (state, action) => state.merge(action.payload)
      }, initialState)
    """