Reduxサンクは返り値を返します。

Question

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

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を取得したり、私はアプローチを間違った理由私は把握することはできません

Answer 1

あなたは次のブロックのためにactions.jsにres.json()を返すのを忘れました。 rootReducerであなたの減速あなたを登録しました、それは

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