前言

續昨天的文章:

Getting started with create-react-app, Redux, React Router & Redux Thunk

4. Rendering our app

We need to tell react-dom to render our application with the correct store and browser history data. We do this by using the ConnectedRouter export given to us by React Router v4. ConnectedRouter has access to the store given to Provider so you don’t need to worry about passing data through any additional props.

這邊大意是說，用ConnectedRouter 去存取瀏覽器的history ，如果只用react-router-dom 通常是用他們的<BrowserRouter>去運作，但他現在交給redux 所以他們會存到redux的store 然後交給Provider

/src/indexs

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import store, { history } from './store'
import App from './containers/app'

import './index.css'

const target = document.querySelector('#root')

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <App />
      </div>
    </ConnectedRouter>
  </Provider>,
  target
)

5.Adding Redux Thunk

這邊很像是redux 的action ，而這段程式碼在做一些加減的行為，可能是在做redux thunk的非同步範例，``

export const INCREMENT_REQUESTED = 'counter/INCREMENT_REQUESTED'
export const INCREMENT = 'counter/INCREMENT'
export const DECREMENT_REQUESTED = 'counter/DECREMENT_REQUESTED'
export const DECREMENT = 'counter/DECREMENT'

const initialState = {
  count: 0,
  isIncrementing: false,
  isDecrementing: false
}

export default (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT_REQUESTED:
      return {
        ...state,
        isIncrementing: true
      }

    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
        isIncrementing: !state.isIncrementing
      }

    case DECREMENT_REQUESTED:
      return {
        ...state,
        isDecrementing: true
      }

    case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
        isDecrementing: !state.isDecrementing
      }

    default:
      return state
  }
}

export const increment = () => {
  return dispatch => {
    dispatch({
      type: INCREMENT_REQUESTED
    })

    dispatch({
      type: INCREMENT
    })
  }
}

export const incrementAsync = () => {
  return dispatch => {
    dispatch({
      type: INCREMENT_REQUESTED
    })

    return setTimeout(() => {
      dispatch({
        type: INCREMENT
      })
    }, 3000)
  }
}

export const decrement = () => {
  return dispatch => {
    dispatch({
      type: DECREMENT_REQUESTED
    })

    dispatch({
      type: DECREMENT
    })
  }
}

export const decrementAsync = () => {
  return dispatch => {
    dispatch({
      type: DECREMENT_REQUESTED
    })

    return setTimeout(() => {
      dispatch({
        type: DECREMENT
      })
    }, 3000)
  }
}

incrementAsync and decrementAsync 是做三秒後自動加減數字，
為了完成上面那段程式碼，他將這個範例加上home的component 裡面，這時候就有即時的加減動作，

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import counter from './counter'

export default combineReducers({
  routing: routerReducer,
  counter
})

實例程式碼
在local測試能跑 但sandbox 卻不能 但程式碼是可以運作的 之後再debug