This library will no longer be maintained. Please consider Zustand, Valtio, Recoil or Jotai instead

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 [email protected]