從Redux獲取API數據

最近我一直在研究react和redux。我閱讀了官方文檔並嘗試了一些ToDo List教程。第一部分是差不多的反應，這是第2部分約終極版：從Redux獲取API數據

http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/

所以基本上他只是建立了一個商店，開始增加了一些待辦事項的數組。現在我不希望我的數據是本地數據，我想從API中獲取數據。我很難理解這是如何實際工作的。所以，我會在我的action_creators.js使用的代碼是：

export function fetchData() { 
    return dispatch => { 
     fetch('http://127.0.0.1:8000/example') 
      .then(res => res.json()) 
      .then(res => dispatch({ 
       type: FETCH_DATA, 
       data: res 
      })) 
    } 
}

現在，在例如添加一個「待辦事項」的示例代碼：

export function addItem(text) { 
    return { 
     type: 'ADD_ITEM', 
     text 
    } 
}

你沒被調度的話，就是做教程這在減速機？但是，當你返回調度你的抓取，這是否會自動發送到你的商店？

如果是這樣我不知道我應該在我寫減速.. 這是代碼我有添加一個「待辦事項」：

import {Map} from 'immutable'; 

function setState(state, newState) { 
    return state.merge(newState); 
} 

function fetchData(state) { 
    return state; 
} 

function addItem(state, text) { 
    const itemId = state.get('hostnames').reduce((maxId, item) => Math.max(maxId,item.get('id')), 0) + 1; 
    const newItem = Map({id: itemId, text: text, status: 'active'}); 
    return state.update('hostnames', (hostnames) => hostnames.push(newItem)); 
} 

export default function(state = Map(), action) { 
    switch (action.type) { 
     case 'SET_STATE': 
      return setState(state, action.state); 
     case 'ADD_ITEM': 
      return addItem(state, action.text); 
     case 'FETCH_DATA': 
      return fetchData(state); 
    } 
    return state; 
}

所以基本上我的問題是，我怎麼取數據（如果抓取現在是錯誤的）以及如何將從我的api抓取的數據添加到我的reducer中的商店。

我剛剛發現react和redux非常複雜，所以很抱歉，如果我要求一個真正的noob問題或只是在我想要做某事的方式犯大錯誤。

在此先感謝您的幫助。

來源

2016-04-19 Matthias

想象你的JSON

{ 
    "data": { 
     "apple": 1, 
     "banana": 3, 
    }, 
    "status": 200, 
}

你的行動

export function fetchData() { 
    return dispatch => { 
     fetch('http://127.0.0.1:8000/example') 
      .then(res => res.json()) 
      .then((responseData) => { 
       if(responseData.status === 200){ 
        dispatch(setData(responseData)); 
       } 
      }) 
    } 
} 

export function setData(responseData) { 
return {type: SET_DATA, data: responseData.data } 
}

你減速

const initialState = { data: null }; 

export default function(state = initialState, action) { 
    switch (action.type) { 
     case 'SET_DATA': 
      return Object.assign({}, state, { 
       data: action.data, 
      }) 
     default: 
     return state; 
    } 
}

那麼你的狀態會變成

{ data: { 
     apple: 1, 
     banana: 3, 
    } 
}

來源

2016-04-19 18:56:04

其實，你所有的減速器都應該是非常笨的和純粹的（沒有任何副作用）。所以他們唯一關心的是修改狀態而不是別的。從服務器獲取數據或任何類型的編排都應該在Reduce中間件中實現。如果你需要更復雜的東西，請看redux-thunk或redux-saga。希望有所幫助。

來源

2016-04-19 13:59:27 Voice

好吧，答案並不是我正在尋找的東西，但是看着他們對我有些幫助。我剛剛複製了代碼有點不對，因爲如果你想執行異步調用，現在該操作返回一個有用的函數。目前我並不是那麼感興趣，所以我應該做一個回報而不是退貨調度。 – Matthias

從Redux獲取API數據

回答

相關問題