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

Question

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

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

actions.js

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

浏览.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;

浏览.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

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

Answer 1

connect 在您的子组件上声明

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

• 您的父组件无需为 connect 操心即使父级本身没有使用该 Prop ，也将其子级所需的所有 Prop 。

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

• 避免将 Prop 盲目地从 parent 传给 child 。如果Child需要相当多的 Prop ，人们不想明确地只传递必需的 Prop ，而是倾向于在父级内部这样做:<Child {...this.props} /> .

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

• 您不必重复 propTypes parent 和 child 的定义。

---

将业务逻辑与 View 分开:

业务逻辑是:

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

View 应该:

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

• 根据数据显示或隐藏 UI

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

• 通过connect获取 Prop 来自业务逻辑功能。

---

什么是业务逻辑函数？

业务逻辑函数是输入数据和输出修改数据的小型可重用函数。如果它们很小，它们可以很容易地重用和修改。业务逻辑函数应该是纯粹的。因为业务逻辑函数经常被重用，所以它们在memoized 时效果最佳。 .在某些语言中，这些称为 getters 或 selectors。

为了简化内存，你可以使用 reselect图书馆。它非常简单，因为它只做两件事:内存和可重用性。查看官方 API 以了解有关其操作方式的更多信息。

优点:

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