react-native-global-store
v1.0.4
Published
React Native App Store state holder and persistor
Downloads
20
Maintainers
Readme
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)