Question

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

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

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函数不会将state作为参数。我喜欢任何建议！

Answer 1

您的子组件

`connect`状态

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

您的父组件无需担心connect其子项所需的所有道具，即使父级本身未使用道具。
子组件变得更可重用，易于维护。
避免从父母到孩子盲目传递道具。如果Child需要相当多的道具，那么人们不希望只显示所需的道具，而是倾向于在父级内执行此操作：<Child {...this.props} />。

使用connect，您就知道您的组件正在获得什么。
您不必在父母和子女中重复propTypes定义。

从视图中分离业务逻辑：

业务逻辑是：

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

观看次数应该：

从状态和/或业务逻辑函数中提取准备好的数据
根据数据显示或隐藏UI
简化UI组件，使其体积小，可重复使用且易于维护
从业务逻辑函数中通过connect获取道具。

什么是业务逻辑功能？

业务逻辑功能是可重复使用的小功能，可输入数据并输出修改后的数据。如果它们很小，它们可以很容易地重复使用和修改。业务逻辑功能应该是纯粹的。由于业务逻辑功能通常重用，因此在memoized时效果最佳。在某些语言中，这些称为 getters 或选择器。

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

<强>优点：

业务逻辑是小功能，易于调试，增强，维护，阅读
业务逻辑功能被记忆，因此重复调用是高效的
业务逻辑是分开的，因此它可以在整个应用程序中重复使用
应用程序更快，因为主要操作是高度优化的

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

1 个答案:

`connect`状态

从视图中分离业务逻辑：

什么是业务逻辑功能？

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

1 个答案:

connect状态

从视图中分离业务逻辑：

什么是业务逻辑功能？

`connect`状态