2016-11-04 17 views
2

私はReactアプリケーションを作成し、Reduxを統合して状態を管理し、ネットワーク要求を行います。React - Redux - コンポーネントにフェッチされたデータを接続します。

私はTodoチュートリアルに従いました。私はreduxウェブサイトから非同期の例に従っていますが、私は固執しています。

私の問題は、私のアプリケーションでは、リモートサーバーからユーザーをフェッチすることです。サーバーが私にオブジェクトを含むjson配列を送ります(サーバーが私に直接オブジェクトを送るのであれば?) jsonは私のように見えます(私は2つのフィールドだけを置いていますが、実際にはもっとたくさんあります):

[{first_name: "Rick"、 "last_name": "Grimes"}]

とにかく私はサーバーからデータを取得できますが、ユーザーのデータをアプリケーションに挿入することはできません。最も重要なのは、なぜそれが機能しないのか理解していることです。ここで

は私のいくつかのファイルです:

アクション/ index.js

export const REQUEST_CONNECTED_USER = 'REQUEST_CONNECTED_USER'; 
export const RECEIVE_CONNECTED_USER = 'RECEIVE_CONNECTED_USER'; 
function requestConnectedUser(){ 
    return { 
     type: REQUEST_CONNECTED_USER 
    } 
} 
function receiveConnectedUser(user){ 
    return { 
     type: RECEIVE_CONNECTED_USER, 
     user:user, 
     receivedAt: Date.now() 
    } 
} 
export function fetchConnectedUser(){ 
    return function(dispatch) { 
     dispatch(requestConnectedUser()); 

     return fetch(`http://local.particeep.com:9000/fake-user`) 
      .then(response => 
       response.json() 
      ) 
      .then(json => 
       dispatch(receiveConnectedUser(json)) 
      ) 

    } 
} 

減速/インデックス:

私は2つのアクション、要求用と応答のために他のを持っています。 js

import { REQUEST_CONNECTED_USER, RECEIVE_CONNECTED_USER } from '../actions 
function connectedUser(state= { 
}, action){ 
    switch (action.type){ 
     case REQUEST_CONNECTED_USER: 
      return Object.assign({}, state, { 
       isFetching: true 
      }); 
     case RECEIVE_CONNECTED_USER: 
      return Object.assign({}, state, { 
       user: action.user, 
       isFetching: false 
      }); 
     default: 
      return state; 
    } 
} 

私は最後に、Profile.jsという名前のコンテナ要素を持っています上記のコードで

import React from 'react'; 
import { fetchConnectedUser } from '../actions'; 
import { connect } from 'react-redux'; 

class Profile extends React.Component{ 
    constructor(props){ 
     super(props); 
    } 

    componentDidMount() { 
     const { dispatch } = this.props; 
     dispatch(fetchConnectedUser()); 
    } 

    render(){ 
     const { user, isFetching} = this.props; 

     console.log("Props log :", this.props); 
     return (

      <DashboardContent> 

       {isFetching && 
       <div> 
        Is fetching 
       </div> 
       } 

       {!isFetching && 
        <div> 
         Call component here and pass user data as props 
        </div> 
       } 
      </DashboardContent> 
     ) 
    } 
} 

function mapStateToProps(state) { 

    const {isFetching, user: connectedUser } = connectedUser || { isFetching: true, user: []} 

    return { 
     isFetching, 
     user: state.connectedUser 
    } 
} 


export default connect(mapStateToProps)(Profile) 

、私はいつもIs Fetching段落という表示がありますが、私はそれを削除しても、私は、ユーザーのデータにアクセスすることはできません。 私はconsole.logに私のアクションがディスパッチされ、状態にデータが追加されているのを見ることができるので、何かの始まりがあると思うが、このデータとUIコンポーネントのリンク通信で何かが見当たらないと思う。 私は良い方法でいるのですか、私はリファクタリングすることがたくさんありますか?どんな助けでも大変助かります!

答えて

1

データをすぐに取得しているのを見て、最初にisFetchingがtrueであると仮定できるようにします。そして、減速正しくあなたのセットアップを想定し

state = { isFetching: true, user: null } 

あなたの減速に初期状態を追加します。この作品

function mapStateToProps(state) { 

    const {isFetching, user } = state.connectedUser 

    return { 
     isFetching, 
     user 
    } 
} 

希望は、クリーンっぽい感じ。

関連する問題