create usage example
parent
c4d5c35950
commit
6fbca8a306
@ -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)}
|
||||
/>
|
||||
)
|
||||
}
|
@ -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
|
Loading…
Reference in New Issue