Este tutorial de Dan Abramov sugiere que la ventaja de usar selectores que actúan sobre el estado global (en lugar de una porción del estado) es que permiten que los contenedores se desvinculen del conocimiento de la estructura del estado.
Si ese es el caso, ¿no deberíamos también evitar mapear directamente los valores de estado a los accesorios y usar selectores en su lugar? De lo contrario, nuestros contenedores aún deben saber dónde existen esos valores en el árbol de estado.
Para ilustrar con un ejemplo...
Asigna directamente un valor de estado anidado a una propiedad:
const mapStateToProps = (state) => ({ isModalVisible: state.modal.isVisible, });contra
No tiene conocimiento de la estructura del estado. Obtiene valor usando el selector isModalVisible() :
const mapStateToProps = (state) => ({ isModalVisible: isModalVisible(state), });Sin embargo, el problema con el último enfoque es que para cada valor en el árbol de estado, tenemos que escribir un selector. Esto parece mucho código repetitivo solo para seleccionar un valor simple. ¿Se considera esto una buena práctica?
La respuesta a tu pregunta es: "depende"
¿Tienes una pequeña aplicación?
Tal vez evite usar redux en absoluto y apéguese al estado de los componentes de reacción.
Es posible que no necesite Redux
¿Tienes una aplicación pequeña?
Escribir un montón de selectores es un montón de repeticiones como dijiste. Evite escribirlos y apéguese al simple mapeo, usando mapStateToProps .
¿Aplicaciones medianas a grandes?
Aquí es donde los selectores y los selectores memorizados dan sus frutos. Se encontrará comprobando si los modales son visibles en muchos componentes. Actualmente, en su estado, el modal se encuentra en state.modal.visible . Pero mañana un modal podría ser parte de un modal padre, tendrá que cambiar todo el mapeo en todos sus componentes a state.parentModal.modal.visible . Puedes ver cómo esto puede salir mal, ¿verdad?
Los pros de los selectores:
mapPropsToState .Ventajas de los selectores memorizados:
Contras
Espero que responda a tu pregunta.
Respondiendo a su último comentario, sí, se recomienda escribir selectores para todos los valores en el árbol, incluso para valores simples no derivados.
Varias razones para hacerlo:
Como mencioné en los comentarios, una vez que esté usando selectores para todos los valores, puede modificar la estructura de árbol como desee y luego solo necesita modificar los selectores en consecuencia. De lo contrario, usted y su co-desarrollador tendrán que modificar manualmente cada mapeo directo, incluso si se trata de datos no derivados.
Desacoplamiento de valores entre diferentes niveles en el árbol. Como dijiste, cuando tienes un selector de nivel global depende de un selector de nivel de segmento, por ejemplo, price dentro del product . Cuando coloque el producto en otro lugar del árbol, simplemente modifique el selector de product y todo el price del selector de nivel global seguirá estando bien. No estoy seguro de que Dan haya mencionado en su tutorial, verifique esta biblioteca y vuelva a seleccionar . Muestra la idea entre niveles.
Eficiencia al obtener datos computados.
Ofc si está haciendo un proyecto pequeño o recuperando valores simples no derivados del árbol, puede usar el mapeo directo. Pero tenga en cuenta que la aplicación amplia de selectores hace que su código sea escalable .
mapStateToProps es el selector. No necesita escribir una función separada para isModalVisible necesariamente. La idea es mapStateToProps es la única función que necesita conocer la estructura del estado global. Puede desglosar esa función si lo desea, especialmente a medida que los subselectores se vuelven más complejos, pero si todo lo que está haciendo es seleccionar un valor simple, no hay necesidad de hacerlo.
Como resultado, el componente contenedor no conoce la estructura de estado . Solo conoce la estructura del valor devuelto por mapStateToProps . Sus dos ejemplos son funcionalmente equivalentes, ya que se relacionan con la pregunta "¿Deberían los contenedores conocer la estructura del estado?". Porque en ambos casos, la respuesta es "No lo hacen".