create usage example

src/App.js

@@ -7,6 +7,8 @@ import { SearchBar } from './components/SearchBar'
 import './App.css'
 import { LangSelect } from './components/LangSelect'
 
+import { Counter } from 'components/Counter'
+
 export const App = () => {
   const { t } = useTranslation()
   return (
@@ -20,6 +22,7 @@ export const App = () => {
         <RsvpReader></RsvpReader>
       </main>
       <footer>Made by Alfred Melch</footer>
+      <Counter />
     </>
   )
 }

src/components/Counter.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { useCounter, CounterProvider } from './CounterStore'
+
+export const Counter = () => {
+  return (
+    <span>
+      <CounterProvider>
+        <MyCounter />
+        <Text />
+        <TextSetter />
+        <Logger />
+      </CounterProvider>
+    </span>
+  )
+}
+
+const Logger = () => {
+  const store = useCounter()
+  console.log(store[0])
+  return <></>
+}
+
+const MyCounter = () => {
+  const [{ counter }, { increment, decrement }] = useCounter()
+  return (
+    <div>
+      {counter}
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+    </div>
+  )
+}
+
+const Text = () => {
+  const [{ text }] = useCounter()
+  return <span>{text}</span>
+}
+
+const TextSetter = () => {
+  const [{ text }, { setText }] = useCounter()
+  return (
+    <input
+      type="text"
+      value={text}
+      onChange={evt => setText(evt.target.value)}
+    />
+  )
+}

src/components/CounterStore.js

@@ -0,0 +1,22 @@
+import { createStore } from 'context-store'
+
+const initialState = {
+  counter: 0,
+  text: 'initial'
+}
+
+const thunks = {
+  increment: () => dispatch => dispatch(),
+  decrement: () => dispatch => dispatch(),
+  setText: text => dispatch => dispatch({ text })
+}
+
+const reducer = {
+  INCREMENT: state => ({ ...state, counter: state.counter + 1 }),
+  DECREMENT: state => ({ ...state, counter: state.counter - 1 }),
+  SET_TEXT: (state, { text }) => ({ ...state, text })
+}
+
+const store = createStore({ reducer, thunks, initialState })
+export const CounterProvider = store.Provider
+export const useCounter = store.useStore

webpack.config.js

@@ -58,6 +58,7 @@ module.exports = (env, argv) => {
         name: entrypoint => `runtime-${entrypoint.name}`
       }
     },
+    resolve: { modules: ['src', 'lib', 'node_modules'] },
     plugins: [
       // creat an index.html
       new HtmlWebpackPlugin(),