Javascript Redux thunk fetch返回未定义

我是

Redux Thunk

新手，在点击按钮组件获取

async

调用后，我在

dispatch

操作方面遇到问题

actions.js

import fetch from 'isomorphic-fetch'

export const getPosts = (json) => {
    return {
        type: constant.GET_POSTS,
        payload: {
            data: json
        }
    }
}

export const loadPosts () => {
    return (dispatch) => {
        return fetch('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                res.json()
            }).then(json => {
                dispatch(getPosts(json))
            })
    }
}

class Button extends React.Component {

    clicked(){
        console.log(this.props.loadJsonPosts()) // got undefined here
    }
    render() {
        return(
            <button onClick={this.clicked.bind(this)}>click</button>
        )
    }
}

import connect from 'react-redux/lib/components/connect'
import { loadPosts } from '../actions/actions.js'
import Button from '../components/Button'

function mapDispatchToProps(dispatch) {
    return {
        loadJsonPosts: () => { dispatch(loadPosts()) }
    }
}

export default connect(null, mapDispatchToProps)(Button)

import * as constant from '../constants/index'

let initialState = { postList: [] }

const reducer = (state = initialState, action) => {

    switch (action.type) {
        case constant.GET_POSTS: //here i call my loadPosts action
            state = Object.assign({}, { postList: [{ post: action.data }] })
            break;
        default:
            break;
    }

    return state
}

export default reducer

button.js

import fetch from 'isomorphic-fetch'

export const getPosts = (json) => {
    return {
        type: constant.GET_POSTS,
        payload: {
            data: json
        }
    }
}

export const loadPosts () => {
    return (dispatch) => {
        return fetch('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                res.json()
            }).then(json => {
                dispatch(getPosts(json))
            })
    }
}

class Button extends React.Component {

    clicked(){
        console.log(this.props.loadJsonPosts()) // got undefined here
    }
    render() {
        return(
            <button onClick={this.clicked.bind(this)}>click</button>
        )
    }
}

import connect from 'react-redux/lib/components/connect'
import { loadPosts } from '../actions/actions.js'
import Button from '../components/Button'

function mapDispatchToProps(dispatch) {
    return {
        loadJsonPosts: () => { dispatch(loadPosts()) }
    }
}

export default connect(null, mapDispatchToProps)(Button)

import * as constant from '../constants/index'

let initialState = { postList: [] }

const reducer = (state = initialState, action) => {

    switch (action.type) {
        case constant.GET_POSTS: //here i call my loadPosts action
            state = Object.assign({}, { postList: [{ post: action.data }] })
            break;
        default:
            break;
    }

    return state
}

export default reducer

reducer.js

import fetch from 'isomorphic-fetch'

export const getPosts = (json) => {
    return {
        type: constant.GET_POSTS,
        payload: {
            data: json
        }
    }
}

export const loadPosts () => {
    return (dispatch) => {
        return fetch('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                res.json()
            }).then(json => {
                dispatch(getPosts(json))
            })
    }
}

class Button extends React.Component {

    clicked(){
        console.log(this.props.loadJsonPosts()) // got undefined here
    }
    render() {
        return(
            <button onClick={this.clicked.bind(this)}>click</button>
        )
    }
}

import connect from 'react-redux/lib/components/connect'
import { loadPosts } from '../actions/actions.js'
import Button from '../components/Button'

function mapDispatchToProps(dispatch) {
    return {
        loadJsonPosts: () => { dispatch(loadPosts()) }
    }
}

export default connect(null, mapDispatchToProps)(Button)

import * as constant from '../constants/index'

let initialState = { postList: [] }

const reducer = (state = initialState, action) => {

    switch (action.type) {
        case constant.GET_POSTS: //here i call my loadPosts action
            state = Object.assign({}, { postList: [{ post: action.data }] })
            break;
        default:
            break;
    }

    return state
}

export default reducer

App.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Main from './components/Main'
import thunk from 'redux-thunk'
import { createStore, applyMiddleware  } from 'redux'
import { Provider } from 'react-redux'
import reducer from './reducers/reducer'
const store = createStore(
    reducer,
    applyMiddleware(thunk)
)

class App extends Component {
    render() {
        return(
            <Provider store={store}>
                <Main />
            </Provider>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

import React，{Component}来自“React”
从“react dom”导入react dom
从“./components/Main”导入Main
从“redux thunk”导入thunk
从“redux”导入{createStore，applyMiddleware}
从“react redux”导入{Provider}
从“./reducers/reducer”导入减速机
const store=createStore(
减速器，
applyMiddleware（thunk）
)
类应用程序扩展组件{
render（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'app'）
)

---

我不明白为什么我得到了未定义的

，

，可能我错过了什么，或者我的方法错误了

您忘记了在actions.js中为下一个then块返回

res.json（）

。 应该是

export const loadPosts () => {
return (dispatch) => {
    return fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res => {
            return res.json();
        }).then(json => {
            dispatch(getPosts(json))
        })
      }}

---

或者您可以通过写入

删除块来跳过return语句。然后（res=>res.json（））

您忘记在actions.js中为下一个then块返回

res.json（）

。 应该是

export const loadPosts () => {
return (dispatch) => {
    return fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res => {
            return res.json();
        }).then(json => {
            dispatch(getPosts(json))
        })
      }}

---

或者，您可以通过写入

来删除块，从而跳过返回语句。然后（res=>res.json（））

我遇到了相同的问题，并发现在创建redux存储时确保thunk中间件是我链中的第一个，这使我能够访问我所追求的承诺，而不是得到

未定义的

store = createStore(
            rootReducer, 
            initialState,
            applyMiddleware(thunk, otherMiddleware1, otherMiddleware2)
        );

我也遇到了同样的问题，并发现在创建redux商店时确保thunk中间件是我链中的第一个，这样我就可以访问我所追求的承诺，而不是得到未定义的

store = createStore(
            rootReducer, 
            initialState,
            applyMiddleware(thunk, otherMiddleware1, otherMiddleware2)
        );

mapDispatchToProps应如下所示：

function mapDispatchToProps(dispatch) {
return {
    // loadPosts instead of loadPosts()
    loadJsonPosts: () => { dispatch(loadPosts) }
} }

mapDispatchToProps应如下所示：

function mapDispatchToProps(dispatch) {
return {
    // loadPosts instead of loadPosts()
    loadJsonPosts: () => { dispatch(loadPosts) }
} }

你在rootReducer中注册了你的reducer吗？你在rootReducer中注册了你的reducer吗？你说得对，Vikramaditya，我已经更正了，但是结果在
mapDispatchToProps
函数中是一样的。你还应该像这样返回函数
loadJsonPosts:（）=>{return dispatch（loadPosts（））}
在reducer中，您不应该为状态分配任何内容，而应该简单地编写``case constant.GET\u POSTS:return Object.assign（{}，{postList:[{post:action.payload.data}}）`仍然有一些错误我无法弄清楚，但我建议再次彻底阅读redux文档。您缺少reduxPlease的一些基础知识请查看此查询：-您是对的Vikramaditya，我已经纠正了它，但结果在
mapDispatchToProps
函数中是相同的。您还应该像下面这样返回函数
loadJsonPosts:（）=>{return dispatch（loadPosts（））}
在reducer中，您不应该为状态分配任何内容，而应该简单地编写``case constant.GET\u POSTS:return Object.assign（{}，{postList:[{post:action.payload.data}}）`仍然有一些错误我无法弄清楚，但我建议再次彻底阅读redux文档。您缺少Redux的一些基础知识，请查看此查询：-这在我的情况下也是正确的。即使在action creator中返回true也失败了。首先移动它会返回预期的值。这在我的情况下也是正确的。即使在action creator中返回true也失败了。现在，首先移动它将返回预期值。