yasser-g / react-native-global-store

React Native Global Store

Add Global Store to your app in just One Step!

• No Store configuration needed!
• No Reducers or ACTIONS required.
• Lightweight and Pure JS (TypeScript).
• No MiddleWares needed, no more dispatch complications.
• Very simple way to change store state, just like Component setState !
• Simply connect your components with simpler connect wrapper
• Easily use hooks for your functional component, useGlobalStore .
• Inspired By redux, but distinguished from it by being faster and easier to learn and use.

Note that this lib was known before as React-Native-Redux.

Instalation

• Install React Native Async Storage (required) if not installed.

• Then install React Native Global Store

   npm i react-native-global-store
  

  - OR -

   yarn add react-native-global-store
  

No Linking or Pods are needed, you are ready to go!

Usage

GlobalStoreProvider

Props

initialState?:  object;
// Optional Initial State, defaults to {}

persistedKeys?:  string[];
// Optional keys to persist its values ( white list to persist )

loadingUI?:  JSX.Element;
// Optional Loading UI, defaults to : <View/>

storageKey?:  string;
// Optionally change Async Storage Key, default key is "GlobalStoreProvider"

import { GlobalStoreProvider } from "react-native-global-store"

Usage Example

import React from "react"
import { GlobalStoreProvider } from "react-native-global-store"
import AppContainer from "../navigation" // Path to Root Navigation

const myInitialState = { /* your initial state */ }

export default ()=> (
  <GlobalStoreProvider 
   initialState={myInitialState} 
   loadingUI={<MyLoadingUI />}
   persistedKeys=["user", "otherKey"] // Changes to these keys' values will be persisted.
  >
    <AppContainer />
  </GlobalStoreProvider>
)

---

useGlobalStore

import { useGlobalStore } from "react-native-global-store"

const [globalState, setGlobalState] = useGlobalStore()

Usage Example

import React from "react"
import { useGlobalStore } from "react-native-global-store"

const MyComponent = (props) => {

	const [globalState, setGlobalState] = useGlobalStore()
	// Then access and edit your globalState normally
	// Just like useState from React. 
	return (
		<>
			// Your Component goes here
		</>
	)
}

export default MyComponent

---

connect

Arguments

Componenet: ComponentClass

Usage

import React from "react"
import { connect } from "react-native-global-store"

class UserPage extend React.Component {

	// Your Component goes here
	
	// Access your store using this.props.yourKey
	// Update your store state using this.props.setGlobalState({})
}

// this will connect your global store to UserPage component props
export default connect(UserPage) 

---