根据 Redux 状态更改组件的布局

Question

我正在 React 中开发一个课程安排应用程序，我正在利用它作为学习 redux 的机会。我目前正在设计一个浏览菜单（实现为浏览组件），它会在加载时显示大学中的学校列表。当用户点击其中一所学校时，它会显示该学校内的科目列表。但是，我希望将学校显示为网格（两列），并且希望将科目显示为列表（一列）。他们也可能需要将不同的道具提供给 Browse 组件。

我该怎么做呢？目前，我有一个 Browse 组件和一个 BrowseReduxContainer 组件。 BrowseReduxContainer 组件使用 react-redux 中的 connect()、mapStateToProps 和 mapDispatchToProps 来填充 Browse 的 props。当我只是显示学校时，这很好用，但我不确定如何根据状态修改浏览的布局。我应该根据状态给 connect() 不同的组件吗？或者我应该在 Browse 组件中实现逻辑以检查道具并相应地显示网格/列表？还是完全不同的东西？

actions.js

export function showSubjects(schoolId) {
  return {
    type: 'SHOW_SUBJECTS',
    schoolId
  };
}

browse.js

const initialState = {
    currentView: 'schools',
    schools: [{id: 'AAAA', name: 'aaaa'}, {id: 'BBBB', name: 'bbbb'}],
    subjects: [{id: 'CCC', name: 'ccc'}, {id: 'DDD', name: 'ddd'}]
};

function browse(state = initialState, action) {
  switch (action.type) {
    case 'SHOW_SUBJECTS':
      return {
        ...state,
        currentView: 'subjects'
      };
    default:
      return state;
  }
}

export default browse;

BrowseReduxContainer.jsx

import { connect } from 'react-redux';
import { showSubjects } from '../actions/actions';
import Browse from '../components/Browse.jsx';

function propsFilter(state) {
  switch (state.currentView) {
    case 'schools':
      return state.schools;
    case 'subjects':
      return state.subjects;
    default:
      throw new Error(`No such view: ${state.currentView}`);
  }
}

const mapStateToProps = (state) => ({
  schools: propsFilter(state)
});

const mapDispatchToProps = (dispatch) => ({
  showSubjects: (schoolId) => {
    dispatch(showSubjects(schoolId));
  }
});

const BrowseReduxContainer = connect(mapStateToProps, mapDispatchToProps)(Browse);

export default BrowseReduxContainer;

Browse.jsx

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const Browse = (props) => (
  <div>
    {props.schools.map((school) => (
      <RaisedButton key={school.id} label={school.name} onClick={props.showSubjects(school.id)} />
    ))}
  </div>
);

export default Browse;

其他相关文件，如有需要，可以在这里查看：https://github.com/Joonpark13/serif.nu/tree/feature/browse

更新： 在这一点上，我最好的猜测是让不同的视图组件具有自己的适当道具，可能称为 BrowseA 和 BrowseB 并根据状态连接适当的组件。我想将此逻辑包含在 BrowseReduxContainer 内的 mapDispatchToProps 中，但后来我意识到 mapDispatchToProps 函数不将状态作为参数。我会喜欢任何建议！

Answer 1

connect 子组件的状态

在子组件上使用connect有以下优点：

• 您的父组件无需为connecting 其子组件所需的所有道具而烦恼，即使父组件本身并未使用该道具。

• 子组件变得更加可重用和易于维护。

• 避免盲目地将道具从父母传给孩子。如果Child 需要相当多的道具，人们不想明确地只传递所需的道具，而是倾向于在父级内部执行此操作：<Child {...this.props} />。

  使用connect，你就知道你的组件得到了什么。

• 您不必在父级和子级中重复 propTypes 定义。

---

将业务逻辑与视图分离：

业务逻辑是：

• 任何基于来自 API 或用户输入的数据的计算
• 数据规范化和格式化
• 以小增量或功能完成，以便它们易于扩展、可组合和可维护
• 在多个视图中重用业务逻辑功能。

视图应该：

• 从状态和/或业务逻辑函数中提取准备好的数据

• 根据数据显示或隐藏 UI

• 简化 UI 组件，使其体积小、可重用且易于维护

• 通过connect 从业务逻辑函数中获取道具。

---

什么是业务逻辑函数？

业务逻辑函数是输入数据和输出修改数据的小型可重用函数。如果它们很小，它们可以很容易地重复使用和修改。业务逻辑功能应该是纯的。因为业务逻辑功能经常重用，它们在memoized 时工作得最好。在某些语言中，这些称为 getter 或 selectors。

为了简化记忆，您可以使用reselect 库。它非常简单，因为它只做两件事：记忆和可重用性。查看官方 API 以了解有关它如何做到这一点的更多信息。

优点：

• 业务逻辑位于易于调试、增强、维护和阅读的小函数中
• 业务逻辑函数已被记忆，因此重复调用是高效的
• 业务逻辑是分离的，因此可以在整个应用程序中重复使用
• 应用程序速度更快，因为主要操作经过高度优化