Redux React create initial state from API

Question

How to define initialState from API?

Actions

import * as types from '../constants/ActionTypes'
import jquery from 'jquery'
import { apiRoot } from '../config.js'
import Immutable from 'immutable'
import Random from 'random-js'

export function fetchLentItemList() {
  return function(dispatch) {
    dispatch(fetchLentItems());
    jquery.get(`${apiRoot}/api/v1/something/`)
      .done((data) => {
        dispatch(fetchLentItems("success", Immutable.fromJS(data)))
      })
      .fail(() => {
        dispatch(fetchLentItems("error"))
      })
  }
}

export function fetchLentItems(status, locations = Immutable.List()) {
  return { type: types.FETCH_LENT_ITEMS, status, locations }
}

Reducers

import * as types from '../constants/ActionTypes'
import { combineReducers } from 'redux'
import Immutable from 'immutable'

const initialState = {
  initialLentItems: [],
  lentItems: [] 
}

function initialLentItems(state = initialState.initialLentItems, action) {
  // return state
  switch (action.type) {
    case types.FETCH_LENT_ITEMS:
      switch (action.status) {
        case 'success':
          return {
            initialLentItems: action.locations,
            lentItems: []
          }
        case 'error':
          return {
            initialLentItems: Immutable.List(),
            lentItems: []
          }
        default:
          return Object.assign({}, state, { isLoading: true })
      }
    default:
      return state
  }
}

const rootReducer = combineReducers({
  initialLentItems
})

export default rootReducer;

In reducers if I defined my initialState like this, it works:

initialLentItems: Immutable.fromJS([
    {
      "lent_item_id": 5648,
      "vendor": "Vendor A",
      "product": "Product A",
      "variant": "Variant A",
    },
    {
      "lent_item_id": 5648,
      "vendor": "Vendor B",
      "product": "Product B",
      "variant": "Variant B",
    }
  ]),

Thanks in advance.

What exactly does not work for you? – vl.lapikov Dec 04 '15 at 09:28 — vl.lapikov, Dec 04 '15 at 09:28
the list I want is not returned – Kris MP Dec 04 '15 at 09:32 — Kris MP, Dec 04 '15 at 09:32

score 12 · Accepted Answer · edited Jan 30 '17 at 14:33

12

In the componentWillMount of your Redux root element (the one that is wrapped by Provider and receives the store) you can dispatch the fetchLentItems function to set up your initial state.

edited Jan 30 '17 at 14:33

totymedli

29,531
22
131
165

answered Dec 04 '15 at 09:44

luanped

3,178
2
26
40

4

If we take this approach, doesn't the root element become sort of a dumping ground for getting state for many different components? And aren't we getting data unnecessarily if a user never ends up going to many of the pages/components when using your site? – Bob Horn May 15 '19 at 14:37

Redux React create initial state from API

1 Answers1