Tengo una función reductora cuyo único propósito es activar y desactivar un estilo. Este es un estilo global y es por eso que está en mi tienda Redux.
Sin embargo, el código parece demasiado obtuso para un cambio tan simple.
const Style = (state = {current: true}, action) => { if(action.type === "toggleAppStyle"){ const newState = { ...state }; newState.current = !state.current; return newState; } return state; };Recientemente me di cuenta de que redux ejecuta todas las funciones de reducción para cada acción individual, lo que me parece extraño, por lo que el estado devuelto debe ser igual al estado inicial si no se llama a action.type para ese reductor en particular.
Aquí está el único lugar donde lo uso:
// ... snip const mapStateToProps = state => { return { Style: state.Style } } // ... snip render() { return ( <img className = 'icon_all' id = {this.props.Style.current === true ? 'icon_10' : 'icon_90'} onClick = {this.clickHandler} src='/images/favicon-optimized.svg'/> ) }el código parece demasiado obtuso para un cambio tan simple.
Demasiado obtuso es un poco demasiado, este es un patrón de actualización inmutable bastante estándar, es decir, copia superficial en una nueva referencia de objeto y actualiza las propiedades necesarias.
No puede ser mucho más simple que lo que ya tiene, pero aquí hay un ejemplo que devuelve el nuevo objeto directamente.
const Style = (state = {current: true}, action) => { if (action.type === "toggleAppStyle") { return { ...state, current: !state.current, }; } return state; };Recientemente me di cuenta de que redux ejecuta todas las funciones de reducción para cada acción individual, lo que me parece extraño, por lo que el estado devuelto debe ser igual al estado inicial si no se llama a action.type para ese reductor en particular.
Nada extraño aquí realmente. La función reducer actúa sobre la acción y opera sobre el estado, devolviendo así una nueva referencia y valor de estado; de lo contrario, simplemente devuelve el valor de estado actual . Aparte de la parte de acción, así es exactamente como funciona la reconciliación de React. Cuando actualiza el estado, está creando nuevas referencias de objetos o valores primitivos. Esto es lo que activa los renderizados.
Por supuesto, si su objetivo es ser lo más breve y sucinto posible, puede reducir el segmento de estado solo al valor booleano y usar un operador ternario para devolver el estado alternado o el valor del estado actual. Ajuste sus selectores redux en consecuencia.
const Style = (state = true, action) => action.type === "toggleAppStyle" ? !state : state;