Zustand
, Valtio
, Recoil
or Jotai
instead
This library will no longer be maintained. Please consider Aniuta
The simplest state manager for Expo and React Native
Installation
Use yarn
yarn add aniuta
or npm
npm i -S aniuta
Usage
import React, { useState } from 'react';
import { Provider, createStore } from 'aniuta';
import { View, Text, Button } from 'react-native';
//useCounter.js. key must be unique
const useCounter = createStore({
key: 'CounterStore',
Store: () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(0);
return { count, increment, decrement, reset };
},
});
//counter.js - Counter Component
function Counter() {
const { count, increment, decrement, reset } = useCounter();
return (
<View>
<Button title='-' onPress={decrement} />
<Text>{count.toString()}</Text>
<Button title='+' onPress={increment} />
<Button title='reset' onPress={reset} />
</View>
);
}
//Just wrap App with Provider component and you are good to go
export default function App() {
return (
<View>
<Provider>
<Counter />
</Provider>
</View>
);
}
See more examples in ./example folder
Tips
For sake of this example lets say we have 2 separate count stores. First for Odd numbers and second for Even numbers.
const useOdds = createStore({
key: 'OddsStore',
Store: () => {
const [count, setCount] = useState(1);
const increment = () => setCount(count + 2);
const decrement = () => setCount(count - 2);
return { count, increment, decrement };
},
});
const useEvens = createStore({
key: 'EvensStore',
Store: () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 2);
const decrement = () => setCount(count - 2);
return { count, increment, decrement };
},
});
Create third wrapper hook which can be used inside component:
function useOddsAndEvens() {
const odds = useOdds();
const evens = useEvens();
return {
odds,
evens,
};
}
App using Aniuta so far
Based On
Related
Hire us
Message us at [email protected]