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