MicroBenz

import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle } from 'recompose';

import { loadCampers } from 'redux/campers/actions';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists

MicroBenz

import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent } from 'recompose';

import { loadCampers } from 'redux/campers/actions';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists,

MicroBenz

import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent, withProps } from 'recompose';

import { loadCampers } from 'redux/campers/actions';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists

MicroBenz

import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent, withProps, withState } from 'recompose';

import { loadCampers } from 'redux/campers/actions';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists

MicroBenz

import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent, withProps, withState } from 'recompose';

import { loadCampers } from 'redux/campers/actions';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists

MicroBenz

// Actions
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff

MicroBenz

// เอาไปสร้าง reducers
import { combineReducers } from 'redux';
import widgets from './ducks/widgets';
import auth from './ducks/auth';

const rootReducer = combineReducers({ auth, widgets });
export default rootReducer;

// เอาไป bind action กับ component
import * as widgetActions from './ducks/widgets';

MicroBenz

import { defineAction } from 'redux-define';

const CREATE_TODO = defineAction('CREATE_TODO', ['ERROR', 'SUCCESS'], 'my-app');

// result:
console.log('' + CREATE_TODO);            // my-app/CREATE_TODO
console.log('' + CREATE_TODO.ERROR);      // my-app/CREATE_TODO_ERROR
console.log('' + CREATE_TODO.SUCCESS);    // my-app/CREATE_TODO_SUCCESS;

MicroBenz

// actionCreator.js
import { defineAction } from 'redux-define';

const appsCreator = defineAction('ywc15');

export const promiseStates = ['PENDING', 'RESOLVED', 'REJECTED'];
export default namespace => (action, isContainPromiseStates) => (
  isContainPromiseStates ?
    appsCreator.defineAction(namespace).defineAction(action, promiseStates) :
    appsCreator.defineAction(namespace).defineAction(action).toString()

MicroBenz

import React from 'react';

export default class BasicComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
      </div>
    );
  }