Redux thunk fetch 返回未定義

Question

我是Redux Thunk新手，在通過單擊按鈕組件獲取async調用后，我在dispatch操作時遇到了問題。

動作.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))
            })
    }
}

按鈕.js

class Button extends React.Component {

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

按鈕容器.js

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)

減速器.js

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

應用程序.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')
)

我不知道為什么我undefined ，也許我錯過了一些東西或者我的方法有誤

Answer 1

您忘記在 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))
        })
      }}

或者您可以通過編寫.then(res => res.json())通過刪除塊來跳過 return 語句

Answer 2

我遇到了同樣的問題，發現在創建 redux 存儲時確保 thunk 中間件在我的鏈中是第一個允許我訪問我所追求的承諾而不是undefined ，

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

Answer 3

mapDispatchToProps 應該是這樣的：

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