从API wtih Redux获取数据

最近我一直在研究react和redux。我阅读了官方文档，并尝试了一些待办事项列表教程。第1部分是关于react的，第2部分是关于redux的：

所以基本上他只是建立了一个商店，并在最初添加了一些待办事项的数组。现在，我不希望我的数据是本地的，我希望从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
    }
}

你没有分派任何东西，教程在减速机中这样做？但是，当您返回并发送回执时，是否会自动将其发送到您的商店

如果是这样的话，我就不知道我应该在减速机上写些什么。。 这是我添加“待办事项”的代码：

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非常复杂，如果我问了一个非常愚蠢的问题，或者只是在我想做的事情上犯了很大的错误，我很抱歉

---

提前感谢您的帮助。

事实上，您所有的减速机都应该非常简单和纯净（没有任何副作用）。因此，他们唯一关心的是修改状态，而不是其他。从服务器获取数据或任何种类的编排都应该在redux中间件中实现。看看或者如果你需要更复杂的东西。希望有帮助。

事实上，你所有的减速机都应该是相当愚蠢和纯净的（没有任何副作用）。因此，他们唯一关心的是修改状态，而不是其他。从服务器获取数据或任何种类的编排都应该在redux中间件中实现。看看或者如果你需要更复杂的东西。希望有帮助。

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

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

---

好吧，答案并不是我想要的，但调查这些问题对我有点帮助。我刚才复制的代码有点错误，因为该操作现在返回一个函数，如果您想进行异步调用，该函数非常有用。目前我对它不太感兴趣，所以我应该做一次退货而不是退货派送。好的，答案不是我真正想要的，但是调查他们对我有点帮助。我刚才复制的代码有点错误，因为该操作现在返回一个函数，如果您想进行异步调用，该函数非常有用。目前我对它不太感兴趣，所以我应该做退货而不是退货。