2015-12-04 9 views
10

Come definire initialState dall'API?Redux React crea lo stato iniziale dall'API

azioni

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 } 
} 

Riduttori

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 se ho definito il mio initialState come questo, funziona:

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", 
    } 
    ]), 

Grazie in anticipo.

+0

Che cosa esattamente non funziona per te? –

+0

l'elenco che desidero non viene restituito –

risposta

6

Nel componentWillMount dell'elemento root di Redux (quello che è stato avvolto da Provider e riceve lo store) è possibile inviare la funzione fetchLentItems per impostare lo stato iniziale.