Question

我使用redux反应组件。这是一个侧边栏和主视图区域的视图。

每当我想创建一个新视图时，我都可以继承这个基本视图。所有可能的操作都在reducer中共享。

唯一的问题是当调度一个动作时我需要对动作命名空间，以便商店有更多关于哪个视图称为动作的上下文。即使动作类型相同。

我在想我可以拥有一组视图，并使用它来使用动态命名空间循环操作类型。我认为我的语法错了。或者我的想法是错的。

我以为我可以循环切换案例 - 我知道现在会返回覆盖自身的多个状态。显然不好。

了解如何干净地处理此操作。

const views = [{name: 'visitor', actionName: 'VISITOR'},{name: 'action', actionName: 'ACTION'}]

const reducer = (state, action) => {

  views.forEach((view, i) => {
    switch (action.type) {

        // View Actions
        case view.actionName + '_VIEW_LOADED':
          return {
            ...state,
            ['open_' + view.name + '_view']: true,
            [view.name + '_props']: action[view.name + '_view_data']
          }

        default:
            return state;

    }
  });
}

Answer 1

这是争论组合而不是继承的最佳时机。如果这个概念对您来说是全新的，请去观看this video。

在我看来，您的公共视图组件应该是您的其他组件的子项（可能是唯一的子组件），可以“扩展”它。然后，您可以传递公共视图组件应使用的特定操作创建者的道具。

/* Common View Component */
class CommonSplitView extends React.Component {
...
  render() {
    return (
      <button onClick={this.props.onCloseDetailView}>Close</button>
      <button onClick={this.props.onOpenDetailView}>Open</button>
    );
  }
}
CommonSplitView.propTypes = {
  onCloseDetailView: React.PropTypes.func,
  onOpenDetailView: React.PropTypes.func
}

/* Component that extends the common view component */
class ProfileView extends React.Component {
...
  render() {
    return (
      <CommonSplitView
        onCloseDetailView={this.props.onCloseDetails}
        onOpenDetailView={this.props.onOpenDetails}
      />
    );
  }
 }
 ...
 const mapStateToProps = state => state;
 const mapDispatchToProps = dispatch => ({
   onCloseDetails: () => { dispatch(<something specific to ProfileView>) },
   onOpenDetails: () => { dispatch(<something specific to ProfileView>) }
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ProfileView);

塔达！就像那样，现在您的公共视图组件（在此示例中为CommonSplitView）将调度特定于ProfileView的操作。挺整洁的吧？这称为控制反转。从父组件中，我注入了我想要CommonSplitView在按下“关闭”和“打开”按钮时调用的方法。事实证明，这种模式在任何地方都非常方便。

希望这会有所帮助。祝你好运！

Redux存储命名空间动作？

1 个答案: