React - Redux - 가져온 데이터를 컴포넌트에 연결하십시오.

Question

나는 상태를 관리하고 네트워크 요청을하기 위해 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 구성 요소에 대한이 데이터와의 링크 통신에서 누락 된 부분이 있다고 생각합니다. 나는 좋은 길을 가고 있는가, 아니면 리팩토링하는 사람이 많은가요? 어떤 도움이라도 도움이 될 것입니다!

Answer 1

데이터를 즉시 가져올 때 나는 isFetching이 처음 시작할 때 true 일 수 있다고 가정 할 수 있습니다. 그런 다음 감속기 제대로에게 설치를 가정

state = { isFetching: true, user: null } 

당신의 감속기에 초기 상태를 추가 :이 작품

function mapStateToProps(state) { 

    const {isFetching, user } = state.connectedUser 

    return { 
     isFetching, 
     user 
    } 
} 

희망, 깨끗한 틱 느낀다.