在 redux 中调用（助手）函数答案

【问题标题】：Calling (helper) function in redux在 redux 中调用（助手）函数
【发布时间】：2017-03-28 14:14:32
【问题描述】：

我正在使用 react-native-router-flux 和 react-redux，我认为我应该在这里问这个问题，如果我错了，请纠正我。

我有 ActivityModal 容器，只要有 API 调用或类似的东西我想显示该模式，我就会调用它来显示。目前我这样称呼它：

Actions.refresh({key: 'activityModal', visible: true}); 显示和 Actions.refresh({key: 'activityModal', visible: false}); 隐藏。

这可行，但我宁愿做一些更优雅的解决方案。我添加了两个操作（用于显示和隐藏）并在那里添加了这些代码行并且它可以工作，但我不确定这是否是正确的方法（并且不使用减速器，只有操作 - 我是 redux 的新手） .我正在考虑另一种方法来做到这一点：添加一些辅助函数，我将有那些 Actions.refresh 调用并将它们导入我需要访问 activityModal 可见性的地方。

请告诉我或建议我最正确的方法是什么？

谢谢！

编辑：我成功了，但我希望你确认这是否是好的做法。这是我所做的：

容器/LoginContainer.js

...
this.props.showActivityModal(); // calling this on button press
...

actions/activityModal.js

...
export function showActivityModal() {
  return {
    type: types.ACTIVITY_MODAL_SHOW,
    payload: {}
  }
}
...

reducers/activityModal.js

...
return {
   visible: true,
   text: ''
};
...

components/ActivityModal.js

...
class ActivityModal extends Component {
   ...
   componentWillReceiveProps(nextProps) {
      this.setState({
        visible: nextProps.activityModal.visible
      })
   }
   ...
}

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

export default connect(mapStateToProps)(ActivityModal);

谢谢！

【问题讨论】：

当您发出 HTTP 请求并希望用户看到加载微调器时，您发送操作 FETCH_SOME_RESOURCE_LOADING。该操作应使状态中的loading 属性设置为true。然后你可以使用它来定义你的 UI 应该是什么样子（如果 loading 是 true，则显示一个微调器）。当从服务器获得响应时，发送一个FETCH_SOME_RESOURCE_SUCCESS 使loading 变为假，因此您的 UI 将不再显示加载微调器。
谢谢@nbkhope。我最终确实喜欢调用 this.props.showActivityModal() 并且它可以工作，进入减速器并返回参数，但如果你能回答我，我还有另一个问题。我现在是否必须在我想使用该加载道具的每个容器中编写 mapStateToProps，或者是否有某种方法可以在路由器上使用 mapStateToProps（例如，我使用的 AppContainer 包含带有场景和 mapDispatchToProps 的路由器）。我试图添加 mapStateToProps 但它说场景键已经定义。谢谢
实际上这不会更简单，它会过于复杂（至少是我创建的），因为我在容器中获得了新的道具，而我必须更新不同的组件（activityModal）所以我仍然需要调用 Actions.refresh 来更改该组件的状态......对吗？
是的，您必须使用 mapStateToProps 才能访问 loading 属性。如果您有不同的资源，则每个资源都有不同的加载属性。
谢谢@nbkhope！我编辑了我的问题，我是如何做到的，它无需在我需要的每个容器上调用 mapStateToProps 即可工作。

标签： reactjs redux react-redux react-native-router-flux

【解决方案1】：

要做到这一点，我所要做的就是：

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

export default connect(mapStateToProps)(ActivityModal);

到我想改变状态的组件。并调度一个动作来实际改变activityModal的状态。

我想这是 react redux 的正常行为，但我刚开始时走错了路，但是嘿，我想通了。

【讨论】：