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中使用的代码是：

vector

现在在示例代码中添加＆＃39; todo＆＃39;：

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

你没有调度任何东西，教程在reducer中做了什么？但是当你返回调度你的fetch时，会自动将它发送到你的商店吗？

如果是这样，我不知道我应该在减速机中写些什么.. 这是我添加＆＃39; todo＆＃39;：

的代码

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

所以基本上我的问题是，我如何获取数据（如果现在提取错误）以及如何将我的api中提取的数据添加到我的reducer中的商店。

我发现反应和redux非常复杂，很抱歉，如果我问一个真正的noob问题，或者只是在想要做某事的方式犯错误。

提前感谢您的帮助。

Answer 1

实际上，你所有的减速器应该是相当愚蠢和纯净的（没有任何副作用）。所以他们唯一关心的是修改状态而不是别的。从redux中间件中实现从服务器或任何类型的业务流程中获取数据。如果您需要更复杂的内容，请查看redux-thunk或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获取数据

2 个答案: