Introduction
Now that hooks have been released, I believe that we will see patterns emerge and the community will find hooks solving problems and simplifying code. This article is a basic introduction to constate, a light weight solution to state management that takes advantage of hooks. Please feel free to comment below on what you think of the topic and the library. Please keep the discussion civil, thank you!
Simple API + Hooks
The API of the library is very simple. We have one function that we will be using called createContainer and then we will be using built in hooks to do the rest. It is not very opinionated in a lot of ways which makes it flexible to the users desired style and organization. The simple (and incredibly trivial) example below shows how it works.
import React from "react"
import createContainer from "constate"
// Our custom hook that returns what will be available in our context
function useText() {
const [text, setText] = React.useState('hello')
const changeLang = () => {
setText('hola')
}
return {
text,
changeLang,
}
}
// Our container
const TextContainer = createContainer(useText)
// we now use the useContext hook to pull out the Context
function TextButton() {
const { changeLang } = React.useContext(TextContainer.Context)
return <button onClick={changeLang}>Change</button>
}
function TextBox() {
const { text } = React.useContext(TextContainer.Context)
return <h1>{text}</h1>
}
// the Container has a provider on it that we need to wrap our components in
function App() {
return (
<TextContainer.Provider>
<TextButton />
<TextBox />
</TextContainer.Provider>
)
}
The Todo List Example
Yes I made a todo list. I do apologize if this makes you sad 😩. I will make more original examples in the future 😎. In the meantime let's check it out.
// This is the useTodos custom hook that will be passed to createContainer
import React from 'react';
const useTodos = () => {
const [ todos, setTodos ] = React.useState([]);
const [ val, setVal ] = React.useState('')
const addTodo = () => {
setTodos([ val, ...todos ]);
setVal('');
}
const updateForm = (e) => {
setVal(e.target.value);
}
return {
todos,
val,
addTodo,
updateForm
}
}
export default useTodos;
Notice above how I could have approached it in different ways. I could have had one useState call that held all of the state, or I could have used useReducer if I wanted something resembling Redux. This shows the flexibility that the library offers.
Here is one of the components to show how to access the state and functions. Using destructuring, I can pull off all of the values and functions that this component needs. The other components access the state in the same way.
import React from 'react';
import TodoContainer from './TodoContainer';
const TodoInput = () => {
const {val, updateForm, addTodo} = React.useContext(TodoContainer.Context);
return (
<div>
<input value={val} onChange={updateForm}/>
<button onClick={addTodo}>ADD</button>
</div>
);
}
export default TodoInput;
Find the rest of the code here. Consider checking out constate and explore hooks in your next project. Thank you for taking the time to read this!
Top comments (0)