aniuta

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

❌ 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,
   };
}

App using Aniuta so far

• Stillwhite. Android, iOS

Based On

• Outstated

Related

• Unstated
• React hooks

Hire us

Message us at [e-mail]