jsをレフィックスと反応させ、私のコンテナはアクション/レデューサーの成功の後にデータを受け取っていません

Question

私はちょっと混乱します。だから私は2週間前に反応し、最近（まだ学習中）還元し始めて、私は行きたいと思った。

私はAPIをフェッチしてリストを表示させようとしています。

それから私は、私のコンテナから、非常に誇りに思っています：

import React, { Component, PropTypes } from 'react'; 

import { fetchPosts, invalidateReq } from '../actions/ajaxactions'; 
import DisplayWikiList from '../components/trending'; 
import DisplayBroadmatchList from '../components/trending'; 
import ColumnName from '../components/trending'; 
import DisplayOutPut from '../components/trending'; 

var Redux = require('redux'); 
var ReactRedux = require('react-redux'); 
var Card = require('material-ui/lib/card/card'); 

const { connect } = ReactRedux; 


export default class DisplayTrendings extends Component { 
    constructor(props) { 
    super(props) 
    } 

    componentDidMount() { 
    const { dispatch } = this.props; 
    dispatch(fetchPosts('trendings')); 
    document.title = 'Blippar-wise Trendings - Blippar Dashboard'; 
    } 

    render() { 
    const { posts, isFetching } = this.props; 
    console.log("posts :", posts); 
    const isEmpty = posts.length === 0; 
    return (
     <Card className="card-main"> 
      <h2 className="trending-title">Trendings</h2> 
      <ColumnName /> 

      {isEmpty 
      ? (isFetching ? <h2>Loading...</h2> : <h2>Empty request.</h2>) 
      : <div className="col-md-6"> 
       <DisplayWikiList style={{ opacity: isFetching ? 0.5 : 1 }} posts={posts} /> 
       </div> 
      } 

      <div className="col-md-6"> 
      <div className="row"> 
       <div className="col-xs-6"> 
       <input type="text" className="bespoke-label" /> 
       </div> 
       <DisplayOutPut /> 
      </div> 
      </div> 
     </Card> 
    ); 
    } 
}; 

DisplayTrendings.propTypes = { 
    posts: PropTypes.array, 
    isFetching: PropTypes.bool, 
    dispatch: PropTypes.func 
}; 

function mapStateToProps(state) { 
    const { 
    isFetching, 
    items: posts 
    } = { 
    isFetching: true, 
    items: [] 
    } 
    return { 
    posts, 
    isFetching 
    }; 
}; 

export default connect(mapStateToProps)(DisplayTrendings) 

私は私の行動を通じて完全に行く流れがあります。

import fetch from 'isomorphic-fetch' 

var Config = require('../configuration/config'); 

export const REQUEST_POSTS = 'REQUEST_POSTS' 
export const RECEIVE_POSTS = 'RECEIVE_POSTS' 
export const INVALIDATE_REQ = 'INVALIDATE_REQ' 

export function invalidateReq(value) { 
    return { 
    type: INVALIDATE_REQ, 
    value 
    }; 
}; 

function requestPosts(value) { 
    return { 
    type: REQUEST_POSTS, 
    value 
    }; 
}; 

function receivePosts(json) { 
    return { 
     type: RECEIVE_POSTS, 
     posts: json 
    }; 
}; 

export function fetchPosts(value) { 
    return dispatch => { 
     dispatch(requestPosts(value)); 
     return fetch(Config.serverUrl + '/' + value, { 
      method: 'GET', 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
       Authorization: Config.authorizationToken 
      }, 
     }) 
      .then(response => response.json()) 
      .then(json => dispatch(receivePosts(json))) 
    }; 
}; 

をして、正しく私をする派遣です減速機！

import { combineReducers } from 'redux' 
import { 
    INVALIDATE_REQ, 
    REQUEST_POSTS, RECEIVE_POSTS 
} from '../actions/ajaxactions' 

function posts(state = { 
    isFetching: false, 
    didInvalidate: false, 
    items: [] 
}, action) { 
    switch (action.type) { 
    case INVALIDATE_REQ: 
     return Object.assign({}, state, { 
      didInvalidate: true 
     }); 
    case REQUEST_POSTS: 
     return Object.assign({}, state, { 
      isFetching: true, 
      didInvalidate: false 
     }); 
    case RECEIVE_POSTS: 
     return Object.assign({}, state, { 
      isFetching: false, 
      didInvalidate: false, 
      items: action.posts 
     }); 
    default: 
     return state; 
    } 
}; 

const rootReducer = combineReducers({ 
    posts 
}); 

export default rootReducer; 

はい！スーパー！ （私はいくつかの非常にスマートなconsole.logsですべてをチェックしたことを追加してみましょう）

しかし、その後、私のページは "isFetching"（読み込み中）でフリーズし、私のコンテナの値 "間違いなく空:(

誰かがはReduxのフロー間のコネクションをやって私を助けることができ、その後、私のコンテナ？ それとも私は多くのおかげでみんな！

このコードでひどく間違っ何か？

をしています

編集：これは私が私のページをロードするとき、コンソールに持っているものである：それは常にがtrueになりますので、あなたのコンテナで

Answer 1

このリファクタプロジェクトから1週間休憩した後、私は問題を突き止めることができました。

要素が、私はこの全体の時間を利用していなかったstate財産、周り、reactJs graviteを変更している...

だから、最初の答えを書いたクリスにTHX、私は把握することができました問題。代わりに、書き込みの

：

今、私はそれを考えるかなり変だった

function mapStateToProps(state) { 
    const { 
    isFetching, 
    items: posts 
    } = { 
    isFetching: true, 
    items: [] 
    } 
    return { 
    posts, 
    isFetching 
    }; 
}; 

、私はちょうど私の前に、この全体の時間だった状態の解は、スイッチ：

function mapStateToProps(state) { 
    console.log("state: ", state); 
    const { 
    isFetching, 
    items: posts 
    } = { 
    isFetching: state.posts.isFetching, 
    items: state.posts.items 
    } 
    return { 
    posts, 
    isFetching 
    }; 
}; 

そしてそれは動作します！ Wuhuuu！

Answer 2

は、あなたは、trueにisFetchingを設定しています。

おそらくデフォルトの状態を設定しようとしているようですが、これはその場所ではありません。

function mapStateToProps(state) { 
    const { 
    isFetching, 
    items: posts 
    } = { 
    isFetching: true, // <-- this will always be true 
    items: [] 
    } 
    return { 
    posts, 
    isFetching 
    }; 
};