React - Redux - Подключить данные к компоненту

Я создаю приложение React и интегрирую Redux в него, чтобы управлять состоянием и выполнять сетевые запросы.React - Redux - Подключить данные к компоненту

Я следовал за учебником Todo, и я следую примеру async с сайта redux, но я застрял.

Вот моя проблема, я хочу, в своем приложении, чтобы получить пользователя с удаленного сервера. Таким образом, сервер отправляет мне массив json, содержащий объект (возможно, лучше, если сервер отправит мне прямо объект?) json Я получаю выглядит так (я помещаю только два поля, но есть больше в реальном):

[{first_name: «Ricks», «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, я могу видеть, что мои действия отправляются и данные добавляются в состояние, но я думаю, что что-то не хватает в связи связи с этими данными с компонентом пользовательского интерфейса. Я нахожусь на хорошем пути или у меня есть много вещей для рефакторинга? Любая помощь будет очень полезна!

источник

2016-11-04 Azilhan

Видя, как вы сразу извлекаете данные, я позволяю себе предположить, что isFetching может быть истинным с самого начала. Добавить начальное состояние для вашего редуктора

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 - Подключить данные к компоненту

ответ

Смежные вопросы