Add redux-saga

package.json

@@ -23,6 +23,7 @@
     "redux-api-middleware": "^2.3.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
+    "redux-saga": "^0.16.0",
     "redux-thunk": "^2.3.0",
     "styled-components": "^3.3.2"
   },

src/components/StopList.js

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-import { getStop } from '../actions/stop'
 import store from '../store'
+import { STOP_REQUEST } from '../constants/ActionTypes'
 
 const StyledBox = styled.div`
 background: #fafafa;
@@ -15,16 +15,25 @@ class StopList extends Component {
   componentWillMount() {
     const { count } = this.props.stop
     if (count === 0)
-      store.dispatch(getStop())
+      store.dispatch({
+        type: STOP_REQUEST,
+        payload: { query: `` }
+      })
   }
 
   handleStopSearch(evt) {
-    store.dispatch(getStop(`search=${evt.target.value}`))
+    store.dispatch({
+      type: STOP_REQUEST,
+      payload: { query: `search=${evt.target.value}` }
+    })
   }
 
   fetchStopNearby(evt) {
     const { lastCenter } = this.props
-    store.dispatch(getStop(`near=${lastCenter[0]},${lastCenter[1]}&range=3&limit=90`))
+    store.dispatch({
+      type: STOP_REQUEST,
+      payload: { query: `near=${lastCenter[0]},${lastCenter[1]}&range=3&limit=90` }
+    })
   }
 
   render() {

src/reducers/stop.js

@@ -10,6 +10,7 @@ const stopInitState = {
   next: null,
   count: 0,
   fetching: false,
+  query: '',
 }
 const stop = (state = stopInitState, action) => {
   switch(action.type) {
@@ -20,9 +21,11 @@ const stop = (state = stopInitState, action) => {
         fetching: false,
       }
     case STOP_REQUEST:
+      const q = action.payload && action.payload.query
       return {
         ...state,
         fetching: true,
+        query: q || '',
       }
     case STOP_SUCCESS:
       const { count, next, prev, results } = action.payload

src/sagas.js

@@ -0,0 +1,19 @@
+import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
+import { apiClient } from './utils/ApiClient'
+import * as types from './constants/ActionTypes'
+
+function* fetchStop(action) {
+  try {
+    const url = `/stop/?${action.payload.query || ''}`
+    const stops = yield call(apiClient, url)
+    yield put({type: types.STOP_SUCCESS, payload: stops.data})
+  } catch (e) {
+    yield put({type: types.STOP_FAILURE, message: e.message})
+  }
+}
+
+function* mySaga() {
+  yield takeLatest(types.STOP_REQUEST, fetchStop)
+}
+
+export default mySaga

src/store.js

@@ -1,10 +1,12 @@
 import thunk from 'redux-thunk'
 import { createStore, applyMiddleware, compose } from 'redux'
+import createSagaMiddleware from 'redux-saga'
 import { apiMiddleware } from 'redux-api-middleware'
 import { createLogger } from 'redux-logger'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
 
+import mySaga from './sagas'
 import gruntApp from './reducers'
 
 const persistConfig = {
@@ -13,7 +15,13 @@ const persistConfig = {
   blacklist: ['agency', 'calendar']
 }
 
-const middleware = [ thunk, apiMiddleware ]
+// create the saga middleware
+const sagaMiddleware = createSagaMiddleware()
+const middleware = [
+  thunk,
+  apiMiddleware,
+  sagaMiddleware, // mount sagaMiddleware on the store
+]
 if (process.env.NODE_ENV !== 'production') {
   middleware.push(createLogger())
 }
@@ -26,4 +34,7 @@ const persistedReducer = persistReducer(persistConfig, gruntApp)
 
 const store = createStore(persistedReducer, enhancer)
 
+// run the saga
+sagaMiddleware.run(mySaga)
+
 export default store