A small copy of waterfall to just to play around with the context API a little more.
npm install mini-lake
This very simple stores gives you a Provider
component, and a connect
function to wrap your components.
Provider
receives two propsinitialState
andactions
.initalState
is an object representing the initial state of your App.actions
is an object representing the actions that affect said state, note that thisactions
must be pure functions that receive the App's current state and returns a new object with the whole new state.
import React from 'react'
import { Provider, connect } from 'mini-lake'
const Counter = ({ count, addToCount }) => {
return (
<div>
<h1>{count}</h1>
<button onClick={addToCount}>Add!</button>
</div>
)
}
const ConnectedCounter = connect(Counter)
const initialState = { count: 0 }
const actions = { addToCount: state => ({ count: state.count + 1 }) }
export default App = () => {
return (
<Provider initalState={initialState} actions={actions}>
<Counter />
</Provider>
)
}
Download the repo and in the root folder run: npm test
.