The simplest state manager for Expo and React Native
Use yarn
yarn add aniutaor npm
npm i -S aniutaimport 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
❌ Do not create single store for everything.
✅ Create store as many stores as needed. Multiple stores will prevent unnessesary re-renders
❌ Do not use store hook inside another store.
✅ If you need to have a hook with 2 store data create additional hook. See below.
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,
};
}Message us at hello@4twiggers.com