2019 04 03 State

Update needed

React v16.8 is released and bring up the hooks. This make this blog may obsolete. #20 Planned to upgrade it. (Preview: Seems React goes with use*-functions the non-global way)

Making Enchilada

Now we have our first interactors and we can change the theme and language.

But! We don't see anything.

What we need to show the language text, we need to know the language setting.

Global or not global, this is now the question!

We could now take the current language setting from the Manager, but that will couple all view implementations to the Manager.

So what is the better solution. We can do an kind of value observer. An observer will react automatically when somethings is changed. Redux is doing this, between other stuff, in that way(simple spoken). This is more or less the global way. In that way I don't care about, when its need, but mostly I lose the control about also. Together comes that is will be global. Global elements have the power to destroy the project, if you not handle it carefully.

But I personally like to do "commands". So a way this allow in a specific moment(for example when language was changed) by a small function call will help here a bit more. It is than also not global, which means, that all view components are not indirect bound together.

To do so, we will build a small handler, which can populate a value to many places.

class ValueChangeHandler {
    static get defaultAdapter() {};
    
    constructor() {
        this.value = null;
    }
    
    setValue(newValue) {}
    registerReceiver(adapter) {}
    deregisterReceiver(adapter) {}
}

Now we need to add this to an view:

class ShowSomethings extends React.Component {
    constructor(props, context, updater) {
        super(props, context, updater);
        
        this.handler = this.props.valueChangeHandler;
        this.handlerAdapter = {onChange: this.setLanguage.bind(this)};
    }
    
    componentDidMount() {
        this.handler.registerReceiver(this.handlerAdapter);
    }
    
    componentWillUnmount() {
        this.handler.deregisterReceiver(this.handlerAdapter);
    }
    
    setLanguage(language) {
        this.setState({language: language});
    }
}

More or less is that the idea, to let redraw

To not recode it at all, I'd like to use some Mix-ins.