Tal vez yo no soy de envolver mi cabeza alrededor de la redux, pero en todos los ejemplos que he visto que realmente no acceder estado demasiado entre los contenedores y así no he visto mucho el uso de la tienda.getState(), pero incluso si desea el envío, usted necesita el acceso a la tienda, ¿verdad?

Así que aparte de la importación de
importar tienda de ‘ruta/a/store/tienda’

en cada archivo que quiero getState() o «despacho», ¿cómo puedo obtener acceso a ese estado, porque si yo no lo incluye, la tienda no está definido.

InformationsquelleAutor james emanon | 2016-02-09

2 Comentarios

  1. 80

    En general, sólo desea hacer contenedor de nivel superior de los componentes que tienen acceso a la tienda que van a pasar todos los datos necesarios o acción distribuye como accesorios para sus hijos componentes. Esta es la diferencia entre un «inteligente» y un «tonto» de componentes – componentes «inteligentes» saber sobre el Resurgimiento de la tienda/del estado, mientras que el «tonto» de los componentes acaba de obtener el atrezzo que les pasa y no tienen idea acerca de la más grande del estado de la aplicación.

    Sin embargo, incluso acaban de pasar el almacén de componentes de contenedor puede llegar a ser tedioso. Es por eso que Reaccionar-Redux ofrece uno de los componentes de la caja que envuelve toda la aplicación. Check it out en los docs. Este es el Provider componente y cuando pase todo tu aplicación, con sólo pasar la tienda a un componente una vez:

    import createStore from '../store';
    
    const store = createStore()
    
    class App extends Component {
    
      render() {
        return (
          <Provider store={store}>
            <MainAppContainer />
          </Provider>
        )
      }
    }

    Como se puede ver aquí, tengo un archivo de configuración independiente sólo para mi tienda, ya que hay una gran cantidad de modificaciones que se pueden hacer y por cualquier forma remota aplicación compleja, te encontrarás haciendo lo mismo para cosas como el uso de componer para aplicar middleware.

    A continuación, cualquiera de sus restantes componentes «inteligentes» (generalmente contenedores) necesidad de escuchar a la tienda. Esto se logra usando el conecte método. Esto permite que usted para piezas de mapa del estado a su componente de las propiedades, así como el envío de las acciones como de las propiedades.

    import { bindActionCreators } from 'redux';
    import { connect } from 'react-redux';
    import * as actionCreators from './actionCreators';
    
    const mapStateToProps = function(state){
      return {
        something: state.something,
      }
    }
    
    const mapDispatchToProps = function (dispatch) {
      return bindActionCreators({
        getSomething: actionCreators.getSomething,
      }, dispatch)
    }
    
    class MainAppContainer extends Component {
    
        componentDidMount() {
          //now has access to data like this.props.something, which is from store
          //now has access to dispatch actions like this.props.getSomething
        }
    
        render() {
            //will pass down store data and dispatch actions to child components
            return (
                   <div>
                       <ChildComponent1 something={this.props.something} />
                       <ChildComponent2 getSomething={this.props.getSomething} />
                   </div>
            )
        }
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(MainAppContainer)

    Ya que siempre se pasa por el despacho de acciones y datos a sus hijos componente de las propiedades, no sólo hace referencia a aquellas en las que el componente con this.props.

    Basada en el ejemplo de arriba, verás que ya me pasó this.props.something a ChildComponent1, tiene acceso a la something de datos de la tienda, pero no tiene acceso a la getSomething envío de acción. Asimismo, ChildComponent2 sólo tiene acceso a la getSomething de despacho de la acción, pero no la something de datos. Esto significa que usted sólo se exponen los componentes exactamente lo que necesitan de la tienda.

    Por ejemplo, porque ChildComponent2 fue transmitido el envío de acción como getSomething, en mi onClick puedo llamar this.props.getSomething y llamará a la expedición de acción , sin necesidad de tener acceso a la tienda. En la misma forma que puede continuar para pasar hacia abajo getSomething a otro niño /a componente a y el componente se podría llamar y/o de paso hacia abajo y el ciclo puede continuar indefinidamente.

    class ChildComponent2 extends Component {
    
        render() {
            return (
                <div>
                    <div onClick={this.props.getSomething}>Click me</div>
                    <NestedComponent getSomething={this.props.getSomething} />
                </div>
            )
        }
    }

    Edición de los comentarios

    Mientras esto no pertenecen directamente a la pregunta, en los comentarios de que parecía un poco confundido acerca de las acciones. Yo en realidad no definen la acción getSomething aquí. En lugar de eso es habitual en Redux aplicaciones a poner todo de su acción definiciones en un archivo independiente denominado actionCreators.js. Este contiene funciones que tienen el mismo nombre, como sus acciones y devolver un objeto con un type la propiedad y cualquier otros métodos/datos que la acción requiere. Por ejemplo, he aquí un ejemplo muy sencillo actionCreators.js de archivo:

    export function getSomething() {
        return {
            type: 'GET_SOMETHING',
            payload: {
                something: 'Here is some data'
            }
        }
    }

    Este tipo de acción es lo que tu reductor iba a escuchar para saber que la acción fue de ser despedido.

    • gracias!! Ahora, ¿qué pasa si usted tiene un hijo componente uner MainAppContainer, digamos, «childAppContainer», se puede mostrar un ejemplo de cómo sería entonces de acuerdo con el estado de & dispatcing una acción? Por lo tanto, si usted quería «actualización» del estado en ChildComponent2, usted diría algo como «getSomething.AddSomething.envío(SOME_CONST_ACTION_NAME);
    • bro, te va a matar a mí! lol.. Te han ayudado muchísimo, gracias! Pero yo soy un poco (y he leído la documentación), torcido en la comprensión de cómo la función de «esto.props.getSomething», obtiene un actionType – no pasa de? Estoy asumiendo que usted no está utilizando distribución beause nos unía. Gracias de nuevo, y si esto es demasiado lol, estoy totalmente de entender. no se preocupe.
    • No se preocupe, hombre. Yo no establece un tipo de acción en getSomething o incluso definir porque normalmente las personas definen todas las acciones para su aplicación en un archivo independiente denominado actionCreators.js. Este sería un archivo lleno de funciones que devuelven un objeto con un type de propiedad y cualquier otra cosa necesaria para la acción. Así que en ese componente sería realmente necesario importar el ‘getSomething función de actionCreators.js así como la bindActionCreators módulo de redux. Me fui de esas sentencias de importación para limpiar el código un poco, pero me pueden agregar de nuevo.
    • Bueno me añadieron las sentencias de importación y un poco en la parte inferior de explicar las acciones en más profundidad. Espero que ayude.
    • getSomething() no debe llamar a getState() ? cuando lo que se necesita para llegar de la tienda de los valores
    • Cabe señalar, por lo menos ahora, que un solo nivel superior componente conectado no es el duro enfoque recomendado para cada caso. A medida que la aplicación de las escalas, es posible que desee conectar otros componentes para evitar la proposición infierno. twitter.com/dan_abramov/status/668585589609005056
    • El enlace github.com/rackt/react-redux/blob/master/docs/… hace referencia devuelve el código de estado HTTP 404.
    • Buena captura, he actualizado los enlaces

  2. 15

    Si utiliza el react-redux paquete, usted va a terminar de envolver sus componentes en un Provider con un store prop. Este establece su única tienda en Reaccionar contexto, que luego se accede desde la connect método de componentes hijos. El connect método tiene dos funciones (mapStateToProps y mapDispatchToProps), que son los anzuelos para obtener el estado de la tienda y envío de mensajes.

    Echa un vistazo aquí para obtener más información

    • Así que si usted tiene 10 contenedor de componentes, cada componente contenedor debe tener su propio connect() implementación, mapStateToProps() y mapDispatchToProps()? Cómo es este ahorro de escritura y tiempo? Pensé que cada componente contenedor sólo podría acceder directamente a la tienda. El prototipo de caso de uso sería un objeto de Usuario que debe ser accesible en cualquier lugar a casi todos los niños y nieto de componentes. ¿Cómo los niños de acceder fácilmente al objeto de Usuario dentro de la tienda?
    • usted todavía puede tener acceso a la tienda, y a no utilizar mapStateToProps() y mapDispatchToProps(), pero va a ser muy acoplamiento de componentes para redux.
    • Creo que es mejor tener cada componente directamente hablar con el estado (redux) de tener a un sin fin de pasar accesorios de componente a componente niños, quién sabe qué tan profundo…que es una cosa fea para estar haciendo.

Dejar respuesta

Please enter your comment!
Please enter your name here