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

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

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

actions.js

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

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;

browse.js

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

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;

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;

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

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;

从“React”导入React；
从“物料界面/RaisedButton”导入RaisedButton；
常量浏览=（道具）=>(
{props.schools.map（（school）=>(
))}
);
导出默认浏览；

如有必要，可在此处查看其他相关文件：

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

在子组件上声明 在子组件上使用

connect

，具有以下优点：

• 您的父组件不必费心连接子组件所需的所有道具，即使父组件本身没有使用道具

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

• 避免盲目地将道具从父母传给孩子。如果

  子项

  需要大量的道具，人们不希望只显式传递所需的道具，而是倾向于在父项内传递：
  使用

  connect

  ，您就知道您的组件得到了什么

• 您不必在父级和子级中重复

  propTypes

  定义

---

将业务逻辑与视图分开： 业务逻辑是：

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

视图应：

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

• 基于数据显示或隐藏用户界面

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

• 通过业务逻辑函数的

  connect

  获取道具

---

什么是业务逻辑功能？ 业务逻辑函数是输入数据和输出修改数据的小型可重用函数。如果它们很小，就可以很容易地重用和修改。业务逻辑函数应该是纯的。因为业务逻辑功能通常是被重用的，所以它们在以下情况下工作得最好。在某些语言中，它们被称为获取器或选择器

要简化备忘录，可以使用库。这是一个非常简单的方法，因为它只做两件事：记忆化和可重用性。看看官方的API，了解更多关于它是如何做到这一点的信息

优势：

• 业务逻辑包含易于调试、增强、维护和读取的小功能
• 业务逻辑函数被记录，以便执行重复调用
• 业务逻辑是分离的，因此可以在整个应用程序中重用
• 应用程序速度更快，因为主要操作经过高度优化

---

这些都是很好的概念，我肯定已经遇到过很多这样的概念，但我在将它们应用到我当前的具体情况时遇到了困难，这就是为什么我首先提出这个问题的原因。您能否提供一些与我提到的特定组件/视图的连接？非常感谢。