react-with-native-store

Simple localStorage/asyncStorage-based and fully typed redux replacement with global persisted storage by default for react and react-native apps.

Usage no npm install needed!

<script type="module">
  import reactWithNativeStore from 'https://cdn.skypack.dev/react-with-native-store';
</script>

README

react-with-native-store

These 164 lines of code without dependencies make it possible to get a simple localStorage/asyncStorage-based and fully typed redux replacement with global persisted storage by default for react and react-native apps.

Every key has its own context so you won't get too many rerenders.

This is not as powerful as redux itself (you ca't define custom selectors, so rerenders will happen in all components where you use the same key), but compared to bare redux, there is way less boilerplate and it's fully typed out of the box.

I think that especially for apps with little state this could be a very good choice, and because we have tools like React Query now, most apps won't need a lot of global persisted state anymore.

Installation

yarn add react-with-native-store

for expo, also install this:

yarn add @react-native-async-storage/async-storage

for bare react-native, also follow these instructions

Usage

First create a wrapper and save it somewhere

import { createStoreProvider, createUseStore } from 'react-with-native-store';

type StoreType = {
  key1: YourType | null;
  key2: string | null;
};

export const initialValues: StoreType = {
  key1: null,
  key2: null,
};

export const StoreProvider = createStoreProvider({ initialValues });
export const useStore = createUseStore(initialValues);
export default useStore;

Then wrap your app in the StoreProvider

import { StoreProvider } from '../store';


const App = () => (
  <StoreProvider>
    {/* Other components */}
    <Component />
  </StoreProvider>
);

Finally, you can use useStore everywhere!

import useStore from "../store";

const YourComponent = () => {
const [key1, setKey1] = useStore('key1');

// your code
};

Enjoy!