merced-react-hooks => Application State, LocalStorage, Lifecycle

The Purpose

Application Level State

useDataStore

import { createDataStore } from "merced-react-hooks"//initialState
const initialState = {
token: "",
baseURL: "",
count,
}
//reducer function
const reducer = (state, action) => {
switch (action.type) {
case "add":
return { ...state, count: state.count + payload }
break
case "sub":
return { ...state, count: state.count - payload }
break
default:
return state
break
}
}
//create provider and consumer hook
export const [DataStore, useDataStore] = createDataStore(initialState, reducer)
import { DataStore } from "./ds.js"ReactDOM.render(
<DataStore>
<App />
</DataStore>
)
import { useDataStore } from "../ds.js"const Component = props => {
//pull out the DataStore
const { dataStore, dispatch } = useDataStore()
return (
<>
<h1>{dataStore.count}</h1>
<button onClick={() => dispatch({ type: "add", payload: 1 })}>add</button>
<button onClick={() => dispatch({ type: "sub", payload: 1 })}>add</button>
</>
)
}

TaskRunner

import { createTaskRunner } from "merced-react-hooks"//initialState
const initialState = {
token: "",
baseURL: "",
count,
}
//reducer function
const taskList = {
add: (state, setState, payload) =>
setState({ ...state, count: count + payload }),
sub: (state, setState, payload) =>
setState({ ...state, count: count - payload }),
}
//create provider and consumer hook
export const [TaskStore, useTaskStore] = createTaskRunner(
initialState,
taskList
)
import { TaskStore } from "./tr.js"ReactDOM.render(
<TaskStore>
<App />
</TaskStore>
)
import { useTaskStore } from "../tr.js"const Component = props => {
//pull out the DataStore
const { taskStore, runTask } = useTaskStore()
return (
<>
<h1>{dataStore.count}</h1>
<button onClick={() => runTask("add", 1)}>add</button>
<button onClick={() => runTask("sub", 1)}>add</button>
</>
)
}

useFormState

import { useFormState } from "merced-react-hooks"const Form = props => {
const [formData, handleChange, resetForm] = useFormState({
name: "",
age: 0,
})
const handleSubmit = event => {
event.preventDefault()
console.log(formData)
resetForm()
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
<input
type="number"
name="age"
value={formData.name}
onChange={handleChange}
/>
<input type="submit" value="click me" />
</form>
)
}

useLocalStorage and useSessionStorage

Lifecycle Hooks

import {useOnMount, useOnUpdate, useOnDismount} from "merced-react-hooks"const Child = (props) => {  useOnDismount(() => console.log("I don't exist anymore"))  return <h1> Look! I exist </h1>
}
const App = (props) => { const [toggle, setToggle] = React.useState(false) useOnMount(() => console.log("I happen onMount")) useOnUpdate(()=>console.log("I happen on update), [toggle]) return (<>
{toggle ? <Child/> : null}
<button onClick={() => setToggle(!toggle)}>Click Me</button>
</>)
}

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store