将React组件与Redux存储连接

react redux的非常基本的简单GET示例

我有一个“MockAPI”，它模拟对API的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);
    });
  }
}

我试图开发一个react-redux流程，通过单击按钮发送一个操作，然后通过redux存储更新组件

以下是我的组件代码：

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

这是我的减速机：

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加载到仪表板数组中，并呈现为

标记，只显示

标题

值。不幸的是，这并没有发生

我看到LOAD\u DASHBOARDS\u SUCCESS操作正在加载，但我看到存储中的

DASHBOARDS

属性仍然是一个空数组，而不是显示返回的数据

---

我在这里遗漏了什么？

你的减速机有一个打字错误<代码>开关（action.types）应该是

开关（action.types）

没有“s”

你的减速机有一个输入错误<代码>开关（action.types）应该是

开关（action.types）

没有“s”

我想你的减速机有输入错误<代码>开关（action.types）应该是

开关（action.types）

没有“s”。你是个天才。我想你的减速机有一个打字错误<代码>开关（action.type）应该是

开关（action.type）

没有“s”。你是个天才。好吧。这太尴尬了，发生在我们所有人身上。有时候，一双额外的眼睛会有帮助。这太尴尬了，发生在我们所有人身上。有时，一双额外的眼睛会有所帮助。

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