1

我是新手，通过单击按钮组件获取呼叫后Redux Thunk，我遇到了操作问题。dispatchasync

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

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)

减速器.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，也许我错过了什么或者我的方法错误

4

3 回答 3

4

res.json()您忘记在 actions.js 中返回下一个 then 块。它应该是

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

于 2016-10-13T09:24:44.617 回答
3

我遇到了同样的问题，发现在创建 redux 存储时确保 thunk 中间件在我的链中首先允许我访问我所追求的承诺，而不是得到undefined，

store = createStore(
            rootReducer, 
            initialState,
            applyMiddleware(thunk, otherMiddleware1, otherMiddleware2)
        );
于 2018-09-13T06:35:41.547 回答
0

mapDispatchToProps 应该是这样的：

function mapDispatchToProps(dispatch) {
return {
    // loadPosts instead of loadPosts()
    loadJsonPosts: () => { dispatch(loadPosts) }
} }
于 2019-11-27T00:05:29.843 回答