Cambiar el diseño de un componente según el estado de Redux

Estoy desarrollando una aplicación de progtwigción de cursos en reactjsr, y la estoy usando como una oportunidad para aprender a reducir. Hay un menú de exploración (implementado como el componente Examinar) que estoy diseñando actualmente y muestra la lista de escuelas en la universidad cuando se carga. Cuando un usuario hace clic en una de las escuelas, muestra una lista de materias dentro de esa escuela. Sin embargo, me gustaría que las escuelas se muestren como una cuadrícula (dos columnas), y me gustaría que los temas se muestren como una lista (una columna). También es posible que presumiblemente necesiten diferentes accesorios para alimentar al componente Examinar.

¿Cómo voy a hacer esto? Actualmente, tengo un componente Browse y un componente BrowseReduxContainer. El componente BrowseReduxContainer utiliza connect (), mapStateToProps y mapDispatchToProps de react-redux para rellenar los puntales de Browse. Esto funciona bien cuando solo estoy mostrando escuelas, pero no estoy seguro de cómo modificar el diseño de Examinar dependiendo del estado. ¿Debería darle a connect () diferentes componentes dependiendo del estado? ¿O debería implementar lógica dentro del componente Examinar para verificar el accesorio y mostrar una cuadrícula / lista en consecuencia? ¿O algo completamente diferente?

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) => ( 
{props.schools.map((school) => ( ))}
); export default Browse;

Otros archivos relevantes, si es necesario, se pueden ver aquí: https://github.com/Joonpark13/serif.nu/tree/feature/browse

ACTUALIZACIÓN: Mi mejor conjetura en este punto fue tener diferentes componentes de visualización con sus propios accesorios apropiados, quizás llamados BrowseA y BrowseB y conectar el apropiado según el estado. Quiero incluir esta lógica en mapDispatchToProps dentro de BrowseReduxContainer, pero luego me di cuenta de que la función mapDispatchToProps no toma el estado como parámetro. ¡Me encantaría cualquier sugerencia!

estado de connect en sus componentes secundarios

Usar connect en componentes secundarios tiene las siguientes ventajas:

  • El componente principal no necesita preocuparse por connect todos los accesorios requeridos por sus hijos, aunque el padre no está usando el accesorio.

  • Los componentes secundarios se vuelven más reutilizables y fáciles de mantener.

  • Evita pasar accesorios a ciegas de padres a hijos. Si el Child requiere un número considerable de accesorios, las personas no quieren pasar explícitamente solo los accesorios necesarios, sino que tienden a hacerlo dentro del padre: .

    Usa connect y ya sabes lo que está obteniendo tu Componente.

  • No es necesario repetir propTypes definiciones de propTypes en padres e hijos.


Separa la lógica de negocios de las vistas:

La lógica de negocios es:

  • Cualquier cálculo basado en datos que provienen de la API o la entrada del usuario
  • Normalización y formateo de datos
  • Hecho en pequeños incrementos o funciones para que sean fácilmente extensibles, compostables y mantenibles
  • Reutilice las funciones de lógica de negocios en múltiples vistas.

Las vistas deberían:

  • Extraiga los datos preparados de las funciones lógicas de estado y / o de negocio
  • Mostrar u ocultar la IU en función de los datos
  • Simplifique los componentes de la interfaz de usuario para que sean pequeños, reutilizables y fáciles de mantener

  • Obtén accesorios a través de connect desde una función de lógica de negocios.


¿Qué es una función de lógica de negocios?

Las funciones de lógica de negocios son pequeñas funciones reutilizables que ingresan datos modificados y generan datos modificados. Si son pequeños, pueden reutilizarse y modificarse fácilmente. Las funciones de la lógica de negocios deben ser puras . Debido a que las funciones lógicas de negocios a menudo se reutilizan , funcionan mejor cuando se las memoriza . En algunos idiomas estos se llaman getters o selectores .

Para agilizar la memorización, puede usar reselect library. Es muy simple ya que solo hace dos cosas: memorización y reutilización. Eche un vistazo a la API oficial para obtener más información sobre cómo lo hace.

Ventajas:

  • La lógica empresarial se basa en funciones pequeñas que son fáciles de depurar, mejorar, mantener y leer
  • Las funciones lógicas de negocios se memorizan para que las llamadas repetidas se realicen
  • La lógica empresarial está separada, por lo que es reutilizable en toda la aplicación
  • La aplicación es más rápida porque las operaciones principales están altamente optimizadas