根据Redux状态更改组件的布局 [英] Changing the layout of a component depending on Redux state

问题描述

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

I'm developing a course scheduling application in react, and I'm using it as a chance to learn redux. There's a browse menu (implemented as the Browse component) that I'm currently designing and it displays the list of schools in the university upon load. When a user clicks on one of the schools, it displays a list of subjects within that school. However, I would like the schools to be displayed as a grid (two columns), and I would like the subjects to be displayed as a list (one column). They also may presumably require different props to be fed to the Browse component.

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

How would I go about doing this? Currently, I have a Browse component and a BrowseReduxContainer component. The BrowseReduxContainer component uses connect(), mapStateToProps, and mapDispatchToProps from react-redux to populate the props of Browse. This works fine when I'm just displaying schools, but I'm not sure how to modify the layout of Browse depending upon the state. Should I be giving connect() different components depending on the state? Or should I implement logic within the Browse component to check the prop and display a grid/list accordingly? Or something else entirely?

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

Other relevant files, if necessary, can be viewed here: https://github.com/Joonpark13/serif.nu/tree/feature/browse

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

UPDATE: My best guess at this point was to have different view components with their own appropriate props, perhaps called BrowseA and BrowseB and connect the appropriate one according to the state. I want to include this logic in mapDispatchToProps within BrowseReduxContainer, but then I realized the mapDispatchToProps function does not take state as a parameter. I'd love any suggestions!

推荐答案

connect 状态

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

• 您的父组件无需担心连接其子项所需的所有道具，即使父项本身未使用prop。

• Your parent component need not bother about connecting all the props required by its children even though the parent itself is not using the prop.

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

Child components become more reusable, and easily maintainable.

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

Avoids passing down props blindly from parent to children. If the Child requires a considerable number of props, people don't want to explicitly pass only the required props, instead they tend to do this inside the parent: <Child {...this.props} />.

使用 connect 并且您知道您的组件正在获得什么。

Use connect and you know what your Component is getting.

您不必重复 propTypes 父母和子女的定义。

You don't have to repeat propTypes definitions in parent and children.

商业逻辑是：

• 任何基于来自API或用户输入的数据的计算


• 数据规范化和格式化


• 以小增量或函数完成，以便它们很容易可扩展，可组合和可维护


• 在多个视图中重用业务逻辑功能。

• Any calculation based on data that came from the API or user input
• Data normalization and formatting
• Done in small increments or functions so that they are easily extendable, composable, and maintainable
• Reuse the business logic functions in multiple views.

意见应该：

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


• 根据数据显示或隐藏UI



• 简化用户界面组件使它们小巧，可重复使用且易于维护

• Pull prepared data from state and/or business logic functions
• Show or hide UI based on data

• Simplify UI components so that they are small, reusable, and easily maintainable

从企业通过 connect 获取道具逻辑函数。

Get props through connect from a business logic function.

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

Business logic functions are small reusable functions that input data and output modified data. If they are small, they can be easily reused and modified. Business logic functions should be pure. Because business logic functions are often reused, they work best when memoized. In some languages these are called getters or selectors.

要简化记忆，您可以使用重新选择库。这很简单，因为它只做两件事：记忆和可重用性。请查看官方API，了解更多信息。

To streamline memoization, you may use reselect library. It’s a very simple as it only does two things: memoization and reusability. Take a look at the official API for more information on how it does that.

优势：

• 业务逻辑是小函数，易于调试，增强，维护和读取


• 业务逻辑函数被记忆，因此重复调用是高效的


• 业务逻辑是分开的，因此它可以在整个应用程序中重复使用


• 应用程序更快，因为主要操作经过高度优化

• Business logic is in small functions that are easy to debug, enhance, maintain, read
• Business logic functions are memoized so repeated calls are performant
• Business logic is separated so it’s reusable across the app
• The application is faster because main operations are highly optimized

这篇关于根据Redux状态更改组件的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！