从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数据

回答

相关问题