在redux

时间:2017-03-28 14:14:33

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

我正在使用react-native-router-flux和react-redux,我想我应该在这里提出这个问题,如果我错了,请纠正我。

我有ActivityModal容器,只要有API调用或我要显示该模式的类似内容,我就会调用它。目前我称之为:

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

这有效,但我想做一些更优雅的解决方案。我添加了两个动作(用于显示和隐藏)并在那里添加了那些代码行并且它可以工作但是我不确定这是否是正确的方法(并且没有使用reducer,只有动作 - 我是redux的新手) 。我正在考虑另一种方法:添加一些辅助函数,我将拥有那些Actions.refresh调用,并将它们导入到我需要访问activityModal可见性的位置。

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

谢谢!

编辑: 我成功了,但我希望你确认这是不错的做法。这是我做的:

容器/ LoginContainer.js

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

动作/ activityModal.js

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

减速器/ activityModal.js

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

组件/ 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);

谢谢!

1 个答案:

答案 0 :(得分:0)

为了做到我想要的,我所要做的就是:

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

export default connect(mapStateToProps)(ActivityModal);

到组件我想改变状态。并派遣一个动作来实际改变活动状态。

我猜这是反应还原的正常行为,但是当我第一次开始时我走错了路,但是嘿,我明白了。