私はそうのようなAPIにGETリクエストをシミュレートする「MockAPI」を持って反応し、Reduxのを</p> <p>ためReduxのストア

Question

非常に基本的な、単純な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 * 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)); 
      }); 
    }; 
} 

そして、ここでは私の減速である：

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; 
    } 
} 

私はのonClickを取得しようとしていますダッシュボード配列にロードし、<p>タグを単にtを表示するようにレンダリングする彼はtitle値です。残念ながら、それは起こっていません。

私はLOAD_DASHBOARDS_SUCCESSアクションがロードされてきているが、私は店でdashboardsプロパティはまだ代わりに返されたデータを示すの空の配列であることがわかり...

私はここで何をしないのですことがわかり？

Answer 1

あなたのレデューサーには誤字があります。 switch(action.types)はswitch(action.type)で、数字は