external-state is an easy and lightweight React state management library.
npm install external-state
or
yarn add external-state
- Creating initial state value
- The initial state value is created using the
store()function.
import { store } from "external-state";
export const countStore = store<number>(0);- Using state management hook: useExternalState
useExternalState()has a similar usage pattern to the reactuseState()hook.- It has the same usage pattern as recoil's useRecoilState.
import { useExternalState } from "external-state";
function Count() {
const [count, setCount] = useExternalState(countStore);
return (
<div>
<div>{count}</div>
<button onClick={() => setCount(count + 1)}>
increase
</button>
</div>
)
}
export default Count;- Using state management hook: useSetExternalState
useSetExternalState()is a function used to update the state.- It has the same usage pattern as recoil's useSetRecoilState.
import { useSetExternalState } from "external-state";
function Count() {
const setCount = useSetExternalState(countStore);
return (
<div>
<button onClick={() => setCount((count) => count + 1)}>
increase
</button>
</div>
)
}
export default Count;- Using state management hook: useExternalValue
useExternalValue()is a function used to subscribe the state value.- It has the same usage pattern as recoil's useRecoilValue.
import { useExternalValue } from "external-state";
function Count() {
const count = useExternalValue(countStore);
return (
<div>
{count}
</div>
)
}
export default Count;- Accessing/Modifying the store outside of React
- Once a store is created, you can use the
.getState()and.setState()methods. - The
.getState()method reads the latest state value at the time of invocation. - The
.setState()method updates the state value. - All of this can be done directly in a vanilla environment, and even if the state is modified outside of React, all components subscribing to the store through the hook will be accurately re-rendered.
- It is also possible to use
async/await. - You can separate the logic for better reusability, as shown in the example below:
export const countActions = {
increase: () => {
const prevCount = countStore.getState();
countStore.setState(prevCount + 1);
},
decrease: () => {
const prevCount = countStore.getState();
countStore.setState(prevCount - 1);
},
increaseIfOdd: () => {
const prevCount = countStore.getState();
if (prevCount % 2 === 1) {
countStore.setState(prevCount + 1);
}
},
increaseAsync: async () => {
const prevCount = countStore.getState();
const response = await fetchCount(1)
const amount = response.data;
countStore.setState(prevCount + amount)
}
}