Question

我已经使用react-redux启动了一个简单的React / Redux系统，大部分是从示例中复制的。（我最终希望开发一个更适合Redux的系统。）

我有一个叫做Places的东西，带有一个标识符placeCode。每个地方的所有详细信息都保存在服务器上的地方数据库中。通常，一切似乎都可以正常运行（在文档和博客的大量帮助下）。但是我找不到如何做我所期望的简单的事情。

有一个placeReceived 操作和一个fetchPlace例程，可以在服务器上进行数据库查找以获得Place记录

function placeReceived(place) {
  return {
    type: actionTypes.PLACE_RECEIVED,
    place,
  };
}

export function fetchPlace(placecode) {
  return dispatch => fetch(`/places/${placecode}`)
    .then(response => response.json())
    .then(data => dispatch(placeReceived(data.data)))
    .catch(e => console.log(e));
}

减速器的相关部分是

const initialState = {
  place: { placeCode: 'HcN' },
};

export default (state = initialState, action) => {
  const updated = { ...state };

  switch (action.type) {
    case constants.PLACE_RECEIVED:
      updated.place = action.place;
      return updated;

    default:
      return state;
  }
};

一个组件是PlaceDetails，它显示placeCode和placeName。

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';

class PlaceDetails extends Component {

  render() {
    const place = this.props ? this.props.place : { placeCode: '' };
    const placeName = place.placeCode ? `${place.placeCode} ${place.placeName}` : 'Missing Place';

    return (
      <Fragment>
        {placeName}
      </Fragment>
    );
  }
}

const mapStateToProps = state => ({
  place: state.plac.place,
});

export default connect(mapStateToProps)(PlaceDetails);

如果我将

连接在一起

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchPlace('BBR'));
  }

进入类PlaceDetails中以查找恒定的Place，然后一切正常，并且PlaceDetails显示从数据库中查找BBR及其placeName。

但是我要做的是通过一个下拉列表（实际上是一个Ant Design Cascade）来选择placeCode，我假设我可以在该下拉列表的onChange()中调用fetchPlace。级联工作正常，它肯定会使用正确的参数调用fetchPlace，但是我看不到已获取位置的迹象（PlaceDetails顽固地继续显示其默认值，并且断点未显示正在调度的动作）。

我觉得我不了解React或Redux的一些基础知识。

我应该如何在下拉菜单中获取选择以触发位置的获取，从而触发PlaceDetails的更新？

更新

根据strelets的要求，我创建了stripped down sandbox个客户。我不熟悉这一切，所以花了一段时间。

我没有看到如何将node.js服务器放入沙箱，因此我想我需要找到一种模拟提取的方法。我看过sinon-stub-promise和MockServer，它们看起来很复杂。 fetch-mock似乎更简单，但是我还没有尝试过。欢迎任何建议，否则当我设置了模拟程序后，我将再次更新此问题。

Answer 1

我觉得我不了解React或Redux的一些基础知识。

那是多么真实。经过几天的研究和阅读，尤其是Valentino's tutorial，并使用容器/表示模式进行重构，现在我的小系统可以正常工作了。

事实证明，我最初的关注对mapStateToProps有所帮助，但是mapDispatchToProps的重要性已使我信服。

顺便说一句，CodeSandbox似乎非常有用。

如何成功获得下拉选择以触发react-redux中的动作调度

1 个答案: