demo using react context as a replacement to redux

context-demo/src/components/App.js

@@ -1,23 +1,24 @@
 import React from 'react';
 import UserCreate from './UserCreate';
-import langContext from '../context/langContext';
+import { LanguageStore } from '../context/langContext';
 import LanguageSelector from './LanguageSelector';
+
 class App extends React.Component {
   state = { lang: 'en' };
 
   onLangChange = lang => this.setState({ lang })
 
   render() {
     return (
-      <div className="ui container">
-        <LanguageSelector onLangChange={this.onLangChange} />
-        {/* Provider is a react component that is created for us to convey data to children */}
-        {/* Provider creates a separate pipe of info each time it is created */}
+      <LanguageStore >
+        <div className="ui container">
+          <LanguageSelector />
+          {/* Provider is a react component that is created for us to convey data to children */}
+          {/* Provider creates a separate pipe of info each time it is created */}
 
-        <langContext.Provider value={this.state.lang}>
           <UserCreate />
-        </langContext.Provider>
-      </div>
+        </div>
+      </LanguageStore>
     );
   }
 }

context-demo/src/components/Button.js

@@ -13,7 +13,7 @@ class Button extends React.Component {
     return (
       <button className="ui button primary" >
         <langContext.Consumer>
-          {(val) => val === 'en' ? 'Submit' : 'Voorleggen'}
+          {({ lang }) => lang === 'en' ? 'Submit' : 'Voorleggen'}
         </langContext.Consumer>
       </button>
     );

context-demo/src/components/Field.js

@@ -5,7 +5,7 @@ class Field extends React.Component {
   static contextType = LangContext;
 
   render () {
-    const text = this.context === 'en' ? 'Name' : 'Naam';
+    const text = this.context.lang === 'en' ? 'Name' : 'Naam';
 
     return (
       <div className="ui field">

context-demo/src/components/LanguageSelector.js

@@ -1,13 +1,14 @@
 import React from 'react';
-
+import langContext from "../context/langContext";
 class LanguageSelector extends React.Component {
 
+  static contextType = langContext;
   render() {
     return (
       <div>
         Select A language :
-        <i className="flag us" onClick={() => this.props.onLangChange('en')} ></i>
-        <i className="flag nl" onClick={() => this.props.onLangChange('du')} ></i>
+        <i className="flag us" onClick={() => this.context.onLangChange('en')} ></i>
+        <i className="flag nl" onClick={() => this.context.onLangChange('du')} ></i>
       </div>
     );
   }

context-demo/src/context/langContext.js

@@ -1,3 +1,21 @@
 import React from 'react';
 
-export default React.createContext('du');
+const Context = React.createContext('du');
+
+// separating business logic (state and action mutating it) from view using 
+// a store (like redux) that is implemented with React.Context
+export class LanguageStore extends React.Component {
+  state = { lang: 'en' }
+
+  onLangChange = lang => this.setState({ lang })
+
+  render() {
+    return (
+      <Context.Provider value={{ ...this.state, onLangChange: this.onLangChange }} >
+        {this.props.children}
+      </Context.Provider>
+    )
+  }
+}
+
+export default Context;