Soy nuevo en el Redux y me pregunto si alguien tiene algunos consejos sobre las mejores prácticas para el manejo de no Reaccionar a eventos como el cambio de tamaño de ventana. En mi investigación, he encontrado este enlace, desde el oficial de Reaccionar documentación:
https://facebook.github.io/react/tips/dom-event-listeners.html

Mi pregunta es, cuando se utiliza Redux, debo almacenar el tamaño de la ventana en mi Tienda, o debería ser mantener en mi componente individual estado?

InformationsquelleAutor user2898229 | 2016-01-28

3 Comentarios

  1. 52

    Buena pregunta. Me gusta tener una interfaz de usuario parte a mi tienda. El reductor de velocidad para la que podría tener este aspecto:

    const initialState = {
        screenWidth: typeof window === 'object' ? window.innerWidth : null
    };
    
    function uiReducer(state = initialState, action) {
        switch (action.type) {
            case SCREEN_RESIZE:
                return Object.assign({}, state, {
                    screenWidth: action.screenWidth
                });
        }
        return state;
    }

    La acción por la cual es bastante repetitivo. (SCREEN_RESIZE ser una constante de cadena.)

    function screenResize(width) {
        return {
            type: SCREEN_RESIZE,
            screenWidth: width
        };
    }

    Finalmente alambre junto con un detector de eventos. Me gustaría poner el siguiente código en el lugar donde se inicia su store variable.

    window.addEventListener('resize', () => {
        store.dispatch(screenResize(window.innerWidth));
    });

    Consultas De Medios De Comunicación

    Si su aplicación se hace más visión binaria de tamaño de la pantalla (por ejemplo, grande/pequeño), es posible que prefiera utilizar una consulta de medios de comunicación en su lugar. por ejemplo,

    const mediaQuery = window.matchMedia('(min-width: 650px)');
    
    if (mediaQuery.matches) {
        store.dispatch(setLargeScreen());
    } else {
        store.dispatch(setSmallScreen());
    }
    
    mediaQuery.addListener((mq) => {
        if (mq.matches) {
            store.dispatch(setLargeScreen());
        } else {
            store.dispatch(setSmallScreen());
        }
    });

    (Voy a dejar fuera de la acción y del reductor de código de este tiempo. Es bastante obvio lo que parece.)

    Una desventaja de este enfoque es que la tienda puede ser inicializado con el valor incorrecto, y estamos confiando en la consulta de medios de comunicación para establecer el valor correcto después de que el almacén ha sido inicializada. Corto de empujar a la consulta de medios de comunicación en el reductor de archivo en sí, no sé la mejor forma de evitar esto. Comentarios bienvenidos.

    ACTUALIZACIÓN

    Ahora que lo pienso, probablemente, usted puede conseguir alrededor de esto, por hacer algo como la siguiente. (Pero cuidado, no he probado esto.)

    const mediaQuery = window.matchMedia('(min-width: 650px)');
    
    const store = createStore(reducer, {
        ui: {
            largeScreen: mediaQuery.matches
        }
    });
    
    mediaQuery.addListener((mq) => {
        if (mq.matches) {
            store.dispatch(setLargeScreen());
        } else {
            store.dispatch(setSmallScreen());
        }
    });

    ACTUALIZACIÓN II: El inconveniente de este último enfoque es que el ui objeto de sustituir todo el ui estado no sólo la largeScreen campo. Cualquier otra cosa que haya de la inicial ui estado se pierde.

    • Me encanta esta respuesta. Tengo muchas ideas aquí.
    • No estoy seguro de si esta es una buena solución. Actualmente estoy en el mismo problema y buscando una buena manera de manejar el tamaño de mi pantalla. Uno de los conceptos clave de la redux es un serializable estado. Y cosas como la importación/exportación el estado o los viajes en el tiempo son una característica que se hacen posibles a través de este. Pero si puedo restaurar previamente almacenadas estado o de hacer viajar en el tiempo, el valor en el estado está fuera de sincronización con mi tamaño real de la ventana. Esto parece que no se lo que la «única fuente de la verdad» se propone.
    • Este es un razonable punto. Este enfoque tiene sus riesgos. El estado almacenado (a) duplicar la información almacenada en el objeto de la ventana y (b) reflexionar, pero no de la unidad, cambios de interfaz de usuario. Pero necesitamos una forma de alertar al resto de la aplicación a los cambios en el navegador del estado, y Redux nos da que.
  2. 6

    Uso redux-sensible para controlar el estado de respuesta de la aplicación. Se utiliza un almacén de potenciador para gestionar un área dedicada(propiedad) de su tienda del estado (normalmente llamado «navegador») a través de su propio reductor, de modo que usted no tiene que implícitamente añadir detectores de eventos para el objeto de documento.

    Todo lo que necesitas hacer es trazar un mapa del navegador.ancho del navegador.altura, etc. para el componente de apoyos.
    Por favor, tenga en cuenta que sólo el reductor de velocidad definido en redux-sensible es responsable de la actualización de estos valores.

  3. 1

    Tengo un caso similar donde tengo el tamaño de la ventana para fines distintos de la capacidad de respuesta. De acuerdo a este, también se podría utilizar redux-procesador:

    function listenToWindowEvent(name, mapEventToAction, filter = (e) => true) {
      return function (dispatch) {
        function handleEvent(e) {
          if (filter(e)) {
            dispatch(mapEventToAction(e));
          }
        }
    
        window.addEventListener(name, handleEvent);
    
        //note: returns a function to unsubscribe
        return () => window.removeEventListener(name, handleEvent);
      };
    }
    
    //turns DOM event into action,
    //you can define many of those
    function globalKeyPress(e) {
      return {
        type: 'GLOBAL_KEY_PRESS',
        key: e.key
      };
    }
    
    //subscribe to event
    let unlistenKeyPress = store.dispatch(listenToWindowEvent('keypress', globalKeyPress));
    //eventually unsubscribe
    unlistenKeyPress();

    Aunque en realidad, si el caso de uso es simple, no es necesario usar una función de procesador. Simplemente hay que crear una función de detector que se lleva Redux despacho como un parámetro y utilizarlo para el envío de acción deseada. Consulte la referencia de un ejemplo. Pero las actualmente aceptadas respuesta bastante cubre este caso

Dejar respuesta

Please enter your comment!
Please enter your name here