Skip to content

Instantly share code, notes, and snippets.

@alexeychikk

alexeychikk/redux-context-fix.js

Last active September 21, 2016 10:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alexeychikk/add4db3397df9feb2a0daf155376a5a8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alexeychikk/add4db3397df9feb2a0daf155376a5a8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. alexeychikk revised this gist Jul 1, 2016. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions redux-context-fix.js
    View file
    Original file line number Diff line number Diff line change
    @@ -62,6 +62,12 @@ class ReduxContextFix {
    if (this.contexts[contextName]) {
    this.connectedComponets[contextName] = this.connectedComponets[contextName] || [];
    this.connectedComponets[contextName].push(component);
    let cwum = component.componentWillUnmount;
    component.componentWillUnmount = () => {
    cwum && cwum.call(component);
    this.connectedComponets[contextName] = this.connectedComponets[contextName]
    .filter(c => c !== component);
    };
    }
    }
    }
  2. alexeychikk created this gist Jun 16, 2016.
    95 changes: 95 additions & 0 deletions redux-context-fix.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    /**
    * Usage
    *
    import React, { Component, PropTypes } from 'react';
    import ReduxContextFix from '../util/reduxContextFix';
    class ScreenSizeAware extends Component {
    static childContextTypes = {
    screenData: PropTypes.object
    };
    getChildContext() {
    return {
    screenData: this.state.screenData
    };
    }
    constructor(props) {
    //...
    ReduxContextFix.register(this);
    }
    _handleWindowResize() {
    let width = window.innerWidth;
    let newState = {
    screenData: { width, small: width <= 768 }
    };
    this.setState(newState);
    ReduxContextFix.notify(newState)
    }
    //...
    };
    class View extends Component {
    static contextTypes = {
    screenData: PropTypes.shape({
    small: PropTypes.bool,
    width: PropTypes.number
    })
    };
    constructor(props) {
    //...
    ReduxContextFix.connect(this);
    }
    }
    *
    */
    class ReduxContextFix {
    constructor() {
    if (ReduxContextFix.instance) return ReduxContextFix.instance;
    ReduxContextFix.instance = this;

    this.contexts = {};
    this.connectedComponets = {};
    }

    connect(component) {
    let componentClass = Object.getPrototypeOf(component).constructor;
    for (let contextName in componentClass.contextTypes) {
    if (this.contexts[contextName]) {
    this.connectedComponets[contextName] = this.connectedComponets[contextName] || [];
    this.connectedComponets[contextName].push(component);
    }
    }
    }

    register(component) {
    if (!component.getChildContext) throw new Error('Component must provide context!');

    let context = component.getChildContext();
    for (let cname in context) {
    this.contexts[cname] = true;
    }
    }

    notify(newState) {
    for (let key in newState) {
    if (this.contexts[key]) {
    let context = newState[key];
    let connectedComponents = this.connectedComponets[key];
    if (!connectedComponents) continue;

    for (let i = 0, length = connectedComponents.length; i < length; i++) {
    let cc = connectedComponents[i];
    cc.context[key] = context;
    cc.forceUpdate();
    }
    }
    }
    }
    }

    export default (new ReduxContextFix());