연결 돌아 오는 스토어 구성 요소 반응

반응-REDUX

내가 지금 같은 API에 GET 요청을 시뮬레이트하는 "MockAPI"이에 대한

아주 기본적인 간단한 GET 예 :

const dashboards = [ 
    { 
    "Id":1, 
    "title":"Overview" 
    }, 
    { 
    "Id":2, 
    "title":"Overview" 
    }, 
    { 
    "Id":3, 
    "title":"Overview" 
    }, 
    { 
    "Id":4, 
    "title":"Overview" 
    } 
]; 

class DashboardApi { 
    static getAllDashboards() { 
    return new Promise((resolve) => { 
     setTimeout(() => { 
     resolve(Object.assign([], dashboards)); 
     }, delay); 
    }); 
    } 
}

내가하려고를 버튼 클릭을 통해 액션을 디스패치하는 반응 - 감소 흐름으로 전개 한 다음 리덕스 스토어를 통해 구성 요소를 업데이트합니다. 여기

내 구성 요소 코드 :

import React, { PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as dashboardActions from '../../actions/dashboardActions'; 

class HomePage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.loadDashboards = this.loadDashboards.bind(this); 
    } 

    loadDashboards() { 
    this.props.dispatch(dashboardActions.loadDashboards()); 
    } 

    dashboardItem(dashboard, index) { 
    return <p key={index}>{dashboard.title}</p>; 
    } 

    render() { 
    return (
     <div> 
      <h1> 
      Hello World! 
      <button onClick={this.loadDashboards}>load</button> 
      </h1> 
      {this.props.dashboards.map(this.dashboardItem)} 
     </div> 
    ); 
    } 
} 

HomePage.propTypes = { 
    dashboards: PropTypes.array.isRequired, 
    dispatch: PropTypes.func.isRequired 
}; 

function mapStateToProps(state) { 
    return { 
    dashboards: state.dashboards 
    }; 
} 

export default connect(mapStateToProps)(HomePage);

그리고 여기 내 dashboardActions.js : 나는 온 클릭을 얻기 위해 노력하고

import initialState from './initialState'; 
import * as types from '../actions/actionTypes'; 

export default function dashboardReducer(state = initialState.dashboards, action) { 
    switch(action.types) { 
     case types.LOAD_DASHBOARDS_SUCCESS: 
      return action.dashboards; 

     default: 
      return state; 
    } 
}

import * as types from './actionTypes'; 
import dashboardApi from '../mockApi/mockDashboardApi'; 

export function loadDashboardsSuccess(dashboards) { 
    return { type: types.LOAD_DASHBOARDS_SUCCESS, dashboards }; 
} 

export function loadDashboards() { 
    return dispatch => { 
     return dashboardApi 
      .getAllDashboards() 
      .then(dashboards => { 
       dispatch(loadDashboardsSuccess(dashboards)); 
      }); 
    }; 
}

을 그리고 여기 내 감속기입니다 대시 보드 배열에로드하고 <p> 태그를 단순히 t 표시로 렌더링 그는 title 값입니다. 불행히도 그것은 일어나지 않습니다. 내가 여기서 무엇을

말이냐 ...

은 내가 LOAD_DASHBOARDS_SUCCESS 조치가로드지고 있음을 볼 수 있지만, 나는 가게에서 dashboards 속성이 여전히 대신 반환 된 데이터를 보여주는 하늘의 배열임을 알?

출처

2017-01-18 iggy2012

입니다. 감속기에 오타가 있다고 생각합니다. 'switch (action.types)'는's '가없는'switch (action.type)'이어야합니다. –

당신은 천재입니다. – iggy2012

감속기에 오타가 있습니다. switch(action.types)은 switch(action.type)이고 '아니오'는

출처

2017-01-18 22:19:58

글쎄. 이것은 창피했다. – iggy2012

우리 모두에게 일어납니다. 때때로 여분의 눈 세트가 도움이됩니다. –

연결 돌아 오는 스토어 구성 요소 반응

답변

관련 문제