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 - 连接到组件的数据

回答

相关问题