Redux Thunk Fetch返回未定义 [英] Redux thunk fetch return undefined

问题描述

我是 Redux Thunk 的新手，并且在通过单击按钮组件获取 async 调用后执行 dispatch 操作时遇到了问题

I'm new with Redux Thunk and I'm having problems with dispatch an action after fetching async call by click on button component.

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

button.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>
        )
    }
}

buttonContainer.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)

reducer.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

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')
)

我不知道为什么我会得到 undefined ，也许我错过了一些东西，或者我弄错了方法

I can't figure out why i get undefined, maybe I've missed something or I've wrong the approach

推荐答案

您忘了在action.js中为下一个随后的块返回 res.json().应该是

You forgot to return res.json() in actions.js for the next then block. it should be

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())

这篇关于Redux Thunk Fetch返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！