Giter Club home page Giter Club logo

react-redux-snippets's Introduction

react-redux-snippets

React and Redux Snippets for the future with ES6 and ES7 capabiilities

Redux Snippets

Action Type - act-t

export const ${1:ACTION_TYPE} = 'app/${2: reducer}/${1:ACTION_TYPE}'

Action Creators File - act-f

/**
 * Action Creators for ${1: Reducer} reducer
**/

import ${2:ACTION_TYPE} from './constants';

export function ${3: actionCreatorName} (${4:payload}) {
    return {
        type: ${2:ACTION_TYPE},
        ${4:payload}
    }
}

Action Creator - act-c

export function ${1: actionCreatorName} (${3:payload}) {
    return {
        type: ${2:ACTION_TYPE},
        ${3:payload}
    }
}

Redux Reducer File - red-f

  /**
   *  ${1:reducerName} reducer
   */
  import { fromJS } from 'immutable';

  // Import Action Types
  import { ${2:ACTION_TYPE} } from './constants';

  const initialState = fromJS({
    ${3:key}: ${4:value}
  });

  function ${1:reducerName}(state = initialState, action) {
    switch (action.type) {
      case ${2:ACTION_TYPE}:
        return state;
      default:
        return state;
    }
  }

  export default ${1:ComponentName};

React Component Snippets

React Component - rcc

import React, { Component, PropTypes } from 'react';

/**
 * ${1:ComponentName}
 */
export class ${1:ComponentName} extends Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>MY COMPONENT</div>
    );
  }
}

${1:ComponentName}.propTypes = {
  ${2:prop}: PropTypes.${3:type}.isRequired
}

export default ${1:ComponentName};

Styled Components

Styled Component - sc

const ${1:ComponentName} = styled.${2:div}`
  $3
`;

Styled Component Export - sc-e

export const ${1:ComponentName} = styled.${2:div}`
  $3
`;

Styled Components Import - sc-i

import styled from 'styled-component';

Redux Saga Snippets

Saga File - saga-f

/**
 * ${1:defaultSagaName} Saga
 */

// Import Global Dependencies
import { takeLatest, take, put, cancel } from 'redux-saga/effects';
import { LOCATION_CHANGE } from 'react-router-redux';

// Import Local Dependencies
import { ${3:ACTION_TYPE} } from './constants';

export function* ${2:calledSaga}() {

}

export function* ${1:defaultSagaName}() {
  const watcher = yield takeLatest(${3:ACTION_TYPE}, ${2:calledSaga});
  yield take(LOCATION_CHANGE);
  yield cancel(watcher);
}

export default [${1:defaultSagaName}];

Saga Form Submit File - saga-form

/**
 * ${1:defaultSagaName} Saga
 */

// Import Global Dependencies
import { takeLatest, take, put, call, cancel } from 'redux-saga/effects';
import { LOCATION_CHANGE } from 'react-router-redux';
import { startSubmit, stopSubmit, reset } from 'redux-form/immutable';
import api from '${2:utils/api}';

// Import Local Dependencies
import { ${3:ACTION_TYPE} } from './constants';

export function* ${4:calledSaga}(action) {
  const data = action.${5:data};
  const formId = action.formId;
  yield put(startSubmit(formId));
  try {
    const response = yield call(api, '${6:method}', '${7:/endpoint}', {
      data
    });
    console.log(response);
    yield put(stopSubmit(formId));
    yield put(reset(formId));
  } catch (error) {
    console.error(error);
    yield put(stopSubmit(formId, { _error: error}));
  }
}

export function* ${1:defaultSagaName}() {
  const watcher = yield takeLatest(${3:ACTION_TYPE}, ${4:calledSaga});
  yield take(LOCATION_CHANGE);
  yield cancel(watcher);
}

export default [${1:defaultSagaName}];

Saga api call - saga-a

try {
  const response = yield call(api, '${1:method}', '${2:/endpoint}', {
    data
  });
  console.log(response);
  $3
} catch (error) {
  console.error(error);
}

react-redux-snippets's People

Contributors

chmaltsp avatar

Stargazers

Arielle Nguyen avatar  avatar

Watchers

James Cloos avatar  avatar

Forkers

ariellephan

react-redux-snippets's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.