reactjs - props - Pasar apoyos al componente de contenedor react-redux

react js

Question

Tengo un componente de contenedor react-redux que se crea dentro de un componente React Native Navigator. Quiero poder pasar el navegador como accesorio a este componente contenedor para que después de presionar un botón dentro de su componente de presentación, pueda empujar un objeto a la pila del navegador.

Quiero hacer esto sin necesidad de escribir a mano todo el código repetitivo que me da el componente de contenedor react-redux (y también no perderme todas las optimizaciones que react-redux me daría aquí también).

Código de componente de contenedor de ejemplo:

const mapStateToProps = (state) => {
    return {
        prop1: state.prop1,
        prop2: state.prop2
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSearchPressed: (e) => {
            dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
        }
    }
}

const SearchViewContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchView)

export default SearchViewContainer

Y me gustaría poder llamar al componente de esta manera desde mi navegador renderScene :

<SearchViewContainer navigator={navigator}/>

En el código de contenedor anterior, necesitaría poder acceder a este accesorio aprobado desde la función mapDispatchToProps .

No me gusta almacenar el navegador en el objeto de estado redux y no quiero pasar el accesorio al componente de presentación.

¿Hay alguna manera de pasar un accesorio a este componente contenedor? Alternativamente, ¿hay algún enfoque alternativo que esté pasando por alto?

Gracias.

Answer 1

Usando decoradores (@)

Si está utilizando decoradores, el siguiente código da un ejemplo en el caso de que desee utilizar decoradores para su conexión redux.

@connect(
    (state, ownProps) => {
        return {
            Foo: ownProps.Foo,
        }
    }
)
export default class Bar extends React.Component {

Si ahora verifica this.props.Foo , verá el accesorio que se agregó desde donde se utilizó el componente Bar .

<Bar Foo={''Baz''} />

En este caso this.props.Foo será la cadena ''Baz''

Espero que esto aclare algunas cosas.

Answer 2

Hay algunas trampas al hacer esto con mecanografiado, así que aquí hay un ejemplo.

Uno de los problemas fue cuando solo está usando dispatchToProps (y no está mapeando ningún accesorio de estado), es importante no omitir el parámetro de estado, (se puede nombrar con un prefijo de subrayado).

Otro problema fue que el parámetro ownProps tenía que escribirse usando una interfaz que contenía solo los accesorios aprobados; esto se puede lograr dividiendo la interfaz de accesorios en dos interfaces, por ejemplo

interface MyComponentOwnProps {
  value: number;
}

interface MyComponentConnectedProps {
  someAction: (x: number) => void;
}

export class MyComponent extends React.Component<
  MyComponentOwnProps & MyComponentConnectedProps
> {
....//  component logic
}

const mapStateToProps = (
  _state: AppState,
  ownProps: MyComponentOwnProps,
) => ({
  value: ownProps.value,
});

const mapDispatchToProps = {
  someAction,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

El componente se puede declarar pasando el parámetro único:

<MyComponent value={event} />

Answer 3

Puede pasar un segundo argumento a mapStateToProps(state, ownProps) que le dará acceso a los accesorios pasados ​​al componente en mapStateToProps

Answer 4

mapStateToProps y mapDispatchToProps toman ambos ownProps como segundo argumento.

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

Para reference