actions - redux thunk

tener múltiples instancias de los mismos componentes de reacción de redux reutilizables en la misma página/ruta

Question

Estamos creando una gran aplicación de front-end.

Estamos usando React-Redux para ello.

Estamos creando algunos componentes reutilizables.

** Esta pregunta se refiere a tener varias instancias de los mismos componentes de reacción de redux reutilizables en la misma página / ruta **

Detalles del problema:

Tenemos un componente de encabezado de sección. El cual está vinculado al estado de redux.

Escucha el reductor de propiedad de encabezado SectionheaderReducer.

Como tenemos 2 instancias de este Encabezado de sección en la página, ambos tienden a mostrar los mismos valores ya que están vinculados a la misma propiedad de estado de la tienda.

Cómo hacer que el componente de reacción reutilizable basado en redux sea configurable.Así que cada instancia puede tener un valor diferente de propiedad de encabezado para el reductor SectionheaderReducer

Answer 1

Interpreté que la pregunta significaba:

• tiene datos de contenido en la tienda (por ejemplo, las secciones y sus títulos)
• tiene componentes para dibujar bits de los datos (por ejemplo, su <SectionHeader /> )
• desea mostrar más de una sección en una página, pero actualmente todos sus encabezados tienen el mismo texto

Una posible solución sería agregar la idea de "secciones" a su tienda. Deberías crear reductores que gestionen la estructura de contenido de los datos. Por ejemplo, el estado de la tienda, al mismo tiempo, puede tener este aspecto:

{ 
  sections: {
     0: {
        header: ''My section title'',
        content: ''Whatever your content is''
     },
     1: {
        header: ''My other section title'',
        content: ''Loads of lovely writing or hrefs to images or whatever''
     }
  }
}

`` `

Entonces tendría un "componente contenedor" o "componente de diseño" o "componente inteligente" (tienen muchos nombres), que "sabe" que desea utilizar la sección 2 y la sección 4 en una página en particular. Cómo sabe esto, depende de ti. Quizás codifique los índices (porque siempre será el mismo), quizás tenga una regla de filtrado, quizás tenga otro campo en la tienda que define las opciones ... etc.

El componente contenedor luego pasaría el encabezado elegido al "tonto", tal vez así:

<SectionHeader>{sections[2].header}</SectionHeader>

o

<SectionHeader title={sections[2].header} />

Answer 2

Lo he implementado de una manera diferente, sin cambiar realmente el nombre de la acción con un espacio de nombres.

Más bien, agregué funciones de infraestructura que interceptarán a los creadores de acción y agregarán meta-data a cada acción. (después de la FSA ) De esa manera no necesita cambiar su reductor o la función mapStateToProps .

También es compatible con redux-thunk .

Debe ser fácil de usar ... reducer-action-interceptor

Answer 3

Necesita implementar alguna forma de espacios de nombres en las instancias. Esto puede ser tan básico como pasar una clave para diferenciar los componentes y los reductores.

Puede usar ownProps en su función mapStateToProps para guiar la asignación a un espacio de nombres

const mapStateToProps = (state, ownProps) {
    let myState = state[ownProps.namepspace]
    return {
        myState.value
    }
}

Se puede usar el mismo método para pasar un espacio de nombres a mapDispatchToProps

const mapDispatchToProps = (dispatch, ownProps) {
    return {
        myAction: (myParam) => dispatch(myAction(ownProps.namespace, myParam))
    }
}

Solo recuerde usar el espacio de nombres en el tipo de acción para que los reductores no pisen los dedos de los pies

const myAction => (namespace, myParam) {
    return { type: `${namespace}/${MY_TYPE_CONSTANT}`, myParam }
}

Y asegúrese de que el reductor tenga un espacio de nombre también

const myReducer = (namespace) => (state = initialState, action) => {
    switch(action.type) {
        case `${namespace}/${MY_TYPE_CONSTANT}`:
            return { ...state, action.myParam }
        default:
            return state
    {
}

Ahora agregue los 2 reductores de espacio de nombre al combinar los reductores

combineReducers({
    myInstance1 : myReducer(''myInstance1'')
    myInstance2 : myReducer(''myInstance2'')
}

Finalmente pasa el espacio de nombres a cada instancia.

render() {
    return (
        <div>
            <MyComponent namespace=''myInstance1'' />
            <MyComponent namespace=''myInstance2'' />
        </div>
    )
}

Descargo de responsabilidad: Soy el principal contribuyente en la siguiente biblioteca.

redux-subspace puede proporcionar una implementación más avanzada de espacios de nombres sin que tenga que volver a implementar este patrón para cada componente para el que desee tener múltiples instancias.

Crear los reductores es similar al de arriba.

const reducer = combineReducers({ 
    myInstance1: namespaced(''myInstance1'')(myReducer)
    myInstance2: namespaced(''myInstance2'')(myReducer)
})

Luego, se puede usar SubspaceProvider para cambiar el estado de cada componente

render() {
    return (
        <div>
            <SubspaceProvider mapState={state => state.myInstance1} namespace=''myInstance1''>
                <MyComponent'' />
            </SubspaceProvider>
            <SubspaceProvider mapState={state => state.myInstance2} namespace=''myInstance2''>
                <MyComponent />
            </SubspaceProvider>
        </div>
    )
}

Solo asegúrese de que también cambie la función mapStateToProps para comenzar a recorrer el subárbol asignado en el proveedor

const mapStateToProps = (state) {
    return {
        state.value
    }
}

También hay un componente de orden superior si prefiere reducir el anidamiento.