使用 Redux 从 API 获取数据

Question

最近一直在研究react和redux。我阅读了官方文档并尝试了一些 ToDo List 教程。第 1 部分只是关于反应，这是关于 redux 的第 2 部分：

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

现在在示例代码中添加一个'todo'：

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

你没有分派任何东西，教程是在 reducer 中做的吗？但是当你 return 发送你的 fetch 时，它会自动发送到你的商店吗？

如果是这样，我不知道我应该在我的减速器中写什么.. 这是我添加 'todo':

的代码

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 获取的数据添加到我的减速器中的存储中。

我只是觉得 react 和 redux 非常复杂，所以如果我问的是一个非常菜鸟的问题或者只是在我想做某事的方式上犯了大错误，我很抱歉。

在此先感谢您的帮助。

Answer 1

实际上，你所有的 reducer 都应该是非常愚蠢和纯粹的（没有任何副作用）。所以他们唯一关心的是修改状态而不是别的。从服务器获取数据或任何类型的编排应该在 redux 中间件中实现。如果您需要更复杂的东西，请查看 redux-thunk or redux-saga。希望对您有所帮助。

Answer 2

想象一下你的 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,
    }
}

使用 Redux 从 API 获取数据

Fetch data from API wtih Redux

immutable.js

redux

react-redux