React - Redux - 連接到組件的數據

我正在創建一個React應用程序並將Redux集成到它以管理狀態並執行網絡請求。React - Redux - 連接到組件的數據

我遵循Todo教程，我正在關注來自redux網站的異步示例，但我被困住了。

這是我的問題，我希望在我的應用程序中從遠程服務器獲取用戶。所以服務器向我發送一個包含對象的json數組（可能最好是服務器直接發送給我一個對象？）我得到的json看起來像這樣（我只放兩個字段，但實際上有更多）：

[{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)) 
      ) 

    } 
}

減速/指數。 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組件。我是在好的方式還是我有很多東西要重構？任何幫助將非常有幫助！

來源

2016-11-04 Azilhan

看到你馬上提取數據時，我允許自己假設在初始化時可能是正確的。添加一個初始狀態，以你的減速

state = { isFetching: true, user: null }

然後假設你設置減速正確：

function mapStateToProps(state) { 

    const {isFetching, user } = state.connectedUser 

    return { 
     isFetching, 
     user 
    } 
}

希望這個作品，感覺乾淨十歲上下。

來源

2016-11-04 21:07:06 kjonsson

React - Redux - 連接到組件的數據

回答

相關問題