reactjs - handlesubmit - react select onchange

Hacer un componente React/Redux autónomo incrustable y distribuible

Question

Estoy construyendo un componente React que se distribuirá a través de npm. El componente usa Redux para su estado y tiene los siguientes casos de uso:

1. Integrado como un componente independiente en una página web regular donde el componente está en la raíz de la aplicación React.
2. Integrado dentro de una aplicación React mayor, donde el consumidor ya creó una tienda <Provider> y Redux en la raíz de su aplicación.

Debido a que Redux requiere que se cree un <provider> y una tienda en la raíz de la aplicación, ¿cómo puedo distribuir el componente para que se pueda usar en ambos sentidos?

Answer 1

Haga su verificación de componente si el context contiene la tienda transferida por el Provider .

• Si es el caso, entonces aplique su lógica específica de Redux.
• Si no es el caso, gestione su propio estado local, pero ofrezca la posibilidad de que el padre pase los manejadores de objetos de props para que se notifique a los padres si es necesario intercambiar datos.

Answer 2

Esto es muy interesante. Pero como idea, ¿por qué no le da al consumidor la capacidad de tomar el reducer sus componentes y ponerlo en la tienda ... y cuando quiere integrar su componente, simplemente dele la habilidad de proporcionar la clave donde su componente puede obtener los accesorios? de.

Por ejemplo, el consumidor crea los reductores de su tienda:

var rootReducer = combineReducers({
someStuffReducer,
externalComponent: yourComponentReducer
})

Luego pase la llave del reductor a su componente:

<YourComponent stateKey="externalComponent" />

En su componente, puede tomar los ownProps y verificar si stateKey está presente:

// YourComponent mapStateToProps
function mapStateToProps(state, ownProps) {
let stateKey = ownProps.stateKey || "yourDefaultKey" // or some logic.. you got the idea
return {
myComponentsState: state[stateKey]
};
}

Esto proporcionará una forma simple de hacer que su componente sea distribuible, con un poco de sobrecarga de configuración para sus consumidores, pero de hecho, si están usando Redux, debería ser pan comido.

Como conclusión

¿Por qué necesita proporcionar una tienda separada? producirá mucho más dolor de cabeza y gastos generales de programación. Solo necesita que su reducer se incluya en la appStore de appStore de su consumidor, eso es todo.

Notas

Su ACTION_TYPES sería global para toda la tienda, pero si les da un prefijo por ejemplo y también los escribe en el archivo README, entonces no es tan malo, porque sus consumidores podrían llamarlos fuera de su componente, si es necesario .