takahirohonda

class Form extends ReactComponents {

  constructor(props) {
    super(props)
    this.state = {id: ''}
    this.submitHandler = this.submitHandler.bind(this)
    this.nameInputHandler = this.nameInputHandler.bind(this)
    this.idInputHandler = this.idInputHandler.bind(this)
  }

takahirohonda

class Form extends ReactComponents {

  state = {id: ''}

  submitHandler = () => {
    // do more things here ....
    // then dispatch action
    this.props.onSubmitHandler()
  }

takahirohonda

const Form = ({state, onInputHandler, onSubmitHandler}) => {
  return (
    <form>
      <label for="firstname">First name</label>
      <input 
        type="text" name="firstname" id="firstname"
        onChange={e => onInputHandler(e.target.name, e.target.value)}
      />
      <label for="id">Id</label>
      <input 

takahirohonda

export const getPersonalData = (payload) =>  (dispatch) => {
  // Make AJAX call 
  return postRequest(payload)
    .then((response) => {
      // Once AJAX call is successful, update the store
      dispatch(setPersonalData(response))
    })
    .catch(err => dispatch(apiCallNotSuccess()))
}

takahirohonda

function dispatch(action) {
  if (!isPlainObject(action)) {
    throw new Error(
      'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
    )
}
  ...

takahirohonda

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

takahirohonda

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import '../public/css/bootstrap.css'
import '../public/css/custom.css'
import { Provider } from 'react-redux'
import { createStore, compose, applyMiddleware } from 'redux'
import reducer from './reducers'
import thunk from 'redux-thunk'

takahirohonda

export const setPersonalData = (personalData) => {
  return {
    type: UPDATE_PesonalData,
    personalData
  }
}

export const getPersonalData = (payload) =>  (dispatch) => {
  // Update the store on the status of API call (optional)
  dispatch(apiCallInProgress())

takahirohonda

import React from 'react'
import expect from 'expect'
import { shallow, mount } from 'enzyme'
import FormInput from '../form-elements/FormInput'

describe('Form Component', () => {

  it('should returns correct label for firstname', () => {
    const wrapper = mount(<FormInput
      inputType = "firstname"

takahirohonda

import React from 'react'
import { expect } from 'chai'
import { shallow, mount } from 'enzyme'
import sinon from 'sinon'
import Form from '../Form'
import  initialState from '../../reducers/initialState'

describe('<Form />', () => {

  let state;