反应冗余关注点分离

Question

我正在尝试构建一个简单的应用程序来查看从NASA的每日图片服务（https://api.nasa.gov/api.html#apod）发布的照片。当前监视按键，然后根据按键是向左、向上、向右或向下箭头更改日期（以及异步图片）。这些将相应地改变一周或一天所表示的日期（想象一下一次在日历上移动一个方块）。

我

遇到的问题是：我创建了一个异步操作创建器来获取下一个潜在日期 - 但是我需要知道应用程序的当前状态和按键以检索新日期。有没有办法将其封装到动作创建器中？或者，我是否应该将应用程序状态放在应用程序中调用导出的操作创建者的位置，以便我可以让我的操作创建者不知道应用程序的状态？我尝试通过在顶级Component的 componentDidMount 中绑定键下函数来做到这一点，但与应用程序商店的绑定似乎没有反映化简器中发生的变化。

依赖于

redux-thunk 中间件和 q 的异步逻辑：

// This function needs to know the current state of the application
// I don't seem to be able to pass in a valid representation of the current state
function goGetAPIUrl(date) {
   ...
}
function getAsync(date) {
  return function (dispatch) {
    return goGetAPIUrl(date).then(
      val => dispatch(gotURL(val)),
      error => dispatch(apologize(error))
    );
  };
}
export default function eventuallyGetAsync(event, date) {
  if(event.which == 37...) {
    return getAsync(date);
  } else {
    return {
      type: "NOACTION"
    }
  }
}

这是与 gridAppState 的顶级绑定，以及在顶级发生的其他事情，这些事情可能与我不太了解。

class App extends React.Component {
  componentDidMount() {
    const { gridAppState, actions } = this.props;
    document.addEventListener("keydown", function() {
      actions.eventuallyGetAsync(event, gridAppState.date);
    });
  }
  render() {
    const { gridAppState, actions } = this.props;
    return (
        <GridApp gridAppState={gridAppState} actions={actions} />
    );
  }
}
App.propTypes = {
  actions: PropTypes.object.isRequired,
  gridAppState: PropTypes.object.isRequired
};
function mapStateToProps(state) {
  return {
    gridAppState: state.gridAppState
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(GridActions, dispatch)
  };
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

我已经验证了正确修改的日期对象是否到达化简器 - 但是 gridAppState 似乎卡在我加载的初始日期。

在依赖于附加事件处理程序和当前应用程序状态的 redux 中处理异步逻辑的正确方法是什么？有没有正确的方法可以做到这三点？

Answer 1

您应该在组件中处理事件，并根据按下的键调用正确的操作。

因此，当您调度异步操作时，您可以执行以下操作：

export default function getNextPhoto(currentDate) {
  return (dispatch) => {
    const newDate = calculateNewDate(currentDate);
    dispatch(requestNewPhoto(newDate));
    return photosService.getPhotoOfDate(newDate)
    .then((response) => {
      dispatch(newPhotoReceived(response.photoURL);
    });
  };
}

您应该处理组件上的按键事件，并在知道需要获取新照片时调度您的操作。

您的应用看起来像

class App extends React.Component {
  componentDidMount() {
    const { gridAppState, actions } = this.props;
    document.addEventListener("keydown", function() {
      if (event.which == 37) {
        actions.getNextPhoto(gridAppState.date);
      } else if (...) {
        actions.getPrevPhoto(gridAppState.date);
      }
      // etc
    });
  }
}

顺便说一下，您仍然缺少在 Redux 存储中更新状态的化简器。