这是我在玩的代码

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import axios from 'axios'

const initialState = {
    user: {},
    requesting: false,
    err: null
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'REQ_USER_INIT': return { ...state, requesting: true }
        case 'REQ_USER_DATA': return { ...state, requesting: false, user: action.user }
        case 'REQ_USER_ERR': return { ...state, requesting: false, err: action.err }
    }
    return state;
}

const logger = (store) => (next) => (action) => {
    let previous = JSON.stringify(store.getState())
    next(action)
    console.log(
        'action: ' + JSON.stringify(action) +
        '\n\tprevious: ' + previous +
        '\n\tcurrent: ' + JSON.stringify(store.getState())
    )
}

const store = createStore(reducer, applyMiddleware(logger, thunk))

store.dispatch((dispatch) => {
    dispatch({ type: 'REQ_USER_INIT' })

    // Fake Online REST API for Testing and Prototyping
    // break url to get an error response
    let usersEndpoint = 'https://jsonplaceholder.typicode.com/users/1'

    axios.get(usersEndpoint)
        .then((response) => {
            dispatch({
                type: 'REQ_USER_DATA',
                user:  {
                    id: response.data.id,
                    username: response.data.username,
                    email: response.data.email,
                }
            })
        })
        .catch((error) => {
            dispatch({
                type: 'REQ_USER_ERR',
                err: error.message
            })
    })
})

我相信这很简单,对吧?收到回复后,我先发送REQ_USER_INIT,然后发送REQ_USER_DATA.我应该记录两个动作,但我得到3个.第二个动作是undefined,我正在努力找出它的原因.是redux-thunk的错误还是我做错了什么?

以下是我的控制台的输出:

action: {"type":"REQ_USER_INIT"}
·previous: {"user":{},"requesting":false,"err":null}
·current: {"user":{},"requesting":true,"err":null}
action: undefined
·previous: {"user":{},"requesting":false,"err":null}
·current: {"user":{},"requesting":true,"err":null}
action: {"type":"REQ_USER_DATA","user":{"id":1,"username":"Bret","email":"Sincere@april.biz"}}
·previous: {"user":{},"requesting":true,"err":null}
·current: {"user":{"id":1,"username":"Bret","email":"Sincere@april.biz"},"requesting":false,"err":null}

推荐答案

中间产品的顺序很重要.试着让logger个成为最后一个

const store = createStore(reducer, applyMiddleware(thunk, logger))

Reactjs相关问答推荐

将对象添加到集合中的数组时的no_id字段

使用Next.js和Next-intl重写区域设置

在reactjs中刷新页面时丢失状态值

我发送的 prop 的值不会改变.如果成功登录,导航栏中的 prop 必须为 true.我从后端得到 200 ok

使用reactrouterdom时显示"对象无效作为React子组件"错误

未捕获的运行时错误:对象作为 React 子项无效

为什么这个 React 组件会导致无限渲染?

如何在 React 过滤器中包含价格过滤器逻辑?

React 应用程序可以嵌入到 PowerPoint 中吗?

使用 map 循环浏览列表列表中的列表并显示它们

React + Redux:数据未正确传递给具有动态路由的组件

如何在 ReactJS 中提交后删除 URL 中的查询参数

动态添加或删除文本输入字段并将值设置为 React JS 中主要状态的数组

我应该使用 useEffect 来为 React Native Reanimated 的 prop 值变化设置动画吗?

如何避免在 react useEffect 上滚动时出现小的延迟?

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

React Router 6.4CreateBrowserRouter子元素不显示

加密 Django Rest Framework API 响应 + 解密响应应用程序中的响应

如何实现两个 SVG 形状相互叠加的 XOR 操作?

试图将页面限制为仅登录但有条件的用户似乎永远不会运行