从 axios 回调更改 redux 状态

Question

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

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

我在我的减速器中调用这个函数是这样的：

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。侦听的 reducers 决定事件是否适用于它，然后适当地更改它的数据。该数据然后返回到 UI 并且需要从状态映射到组件的道具。

对于您的代码，这意味着 axios 调用应该作为一个动作来调用。当调用 returns 时，无论是成功还是失败，都应该调度一个事件，reducer 会接收到该事件，并在其中使用事件数据中的数据对数据进行重组。

任何严肃的数据处理或思考都不应该发生在 reducer 中。 reducer 应该只使用来自 action 的数据。

我在 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 or redux-saga. But @SteveB is right. Never have any side effects in your reducers. They should be pure. From the redux docs:

Things you should never do inside a reducer:

Mutate its arguments;

Perform side effects like API calls and routing transitions;

Call non-pure functions, e.g. Date.now() or Math.random().

从 axios 回调更改 redux 状态

changing redux state from axios call back

reactjs

redux

react-redux

axios