Question

我试图在AJAX服务器之后从reducer中更改redux的状态，但出于某种原因，当我在promise响应中更改状态变量时，它仍然没有像我想要的那样改变状态到。

我疯了我自己的AXIOS界面：

export function my_post(url, json_data, success_callback, error_callback) {
  return axios({
    method: 'post',
    url: url,
    data: btoa(JSON.stringify(json_data)) || {},
    headers: {
      'X-XSRFToken': getCookie('_xsrf')
    }
  }).then(response => {
    if (success_callback)
      success_callback(response)
  }).catch(error => {
    if (error_callback)
      error_callback(error)
  })
}

我在我的reducer中调用此函数是这样的：

export default (state = initState, action) => {
    switch(action.type) {
        case actionTypes.AJAX:
            my_post(
                '/ajax/url',
                {
                    content: 'some content'
                },
                (response) => {
                    state = {
                        ...state,
                        ts: response['ts']
                    }
                }
            )
            break
    }
    return state
}

也尝试了这个：

export default (state = initstate, action) => {
    switch(action.type) {
        case actionTypes.AJAX:
            my_post(
                '/ajax/url',
                {
                    content: 'some content'
                }
            ).then(
                state = {
                    ...state,
                    ts: response['ts']
                }
            )
            break
    }
    return state
}

但是当我到达return state时，ts论证并不存在。

我在这里缺少什么？

Answer 1

您的提案似乎不是redux的标准实现。

典型的结构是要调用的操作，然后当操作完成事件并将数据分派给所有reducer时。收听减少器决定事件是否适用于它，然后适当地改变其数据。然后将此数据返回到UI，并且需要从状态映射到组件的props。

对于您的代码，这意味着应将axios调用作为操作调用。当调用成功或不成功返回时，应调度reducer接收的事件以及使用事件数据中的数据重构数据的位置。

任何严肃的数据处理或思考都不应该在reducer中发生。 reducer应该只是消耗动作中的数据。

我在Github上有一个例子，说明我在这里谈论的简单实现：https://github.com/NickDelfino/nextjs-with-redux-and-cloud-firestore

它并不完美适用，但显示了我上面讨论的概念。

我还认为你可能需要使用Redux-Thunk来进行网络调用。文档和代码可以在这里找到： https://github.com/gaearon/redux-thunk

我还建议在他们的网站上查看redux基础：https://redux.js.org/docs/basics/

随意提出更多问题！我希望这很有帮助！

Answer 2

API调用应该在您的操作中发生。您可以在redux操作中使用额外的包来处理异步副作用。请查看redux-thunk或redux-saga。但@SteveB是对的。减压器中没有任何副作用。他们应该是纯洁的。 From the redux docs：

你应该从不在减速器内做的事情：


改变其论点;

执行API调用和路由等副作用   过渡;

调用非纯函数，例如Date.now（）或   的Math.random（）。

从axios回调改变redux状态

2 个答案: