From f3af9f6600667b74363eb9888fa875d4aff46a02 Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Tue, 26 Feb 2019 13:00:44 +0000 Subject: [PATCH 01/11] Add an useAsyncStorage hook --- README.md | 23 ++++++++++++++++++++++- lib/AsyncStorage.js | 21 ++++++++++++++++++++- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 946405c9..760a0b8e 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ storeData = async () => { ``` -### Read data +### Read data ```jsx getData = async () => { @@ -54,6 +54,27 @@ getData = async () => { ``` +### useAsyncStorage hook + +```js +import { useEffect } from 'react'; +import { useAsyncStorage } from '@react-native-community/async-storage'; +``` + +```jsx + const { getItem } = useAsyncStorage('@storage_key'); + + const readItemFromStorage = async () => { + const item = await getItem(); + console.log(item); + // here you can save it to component state + } + + useEffect(() => { + readItemFromStorage(); + }, []); +``` + See docs for [api and more examples.](docs/API.md) ## License diff --git a/lib/AsyncStorage.js b/lib/AsyncStorage.js index 21a75bbc..1ab6962e 100644 --- a/lib/AsyncStorage.js +++ b/lib/AsyncStorage.js @@ -367,4 +367,23 @@ function convertError(error): ?Error { return out; } -module.exports = AsyncStorage; +type AsyncStorageHook = { + getItem: (callback?: ?(error: ?Error, result: string | null) => void): Promise, + setItem: (value: string, callback?: ?(error: ?Error) => void): Promise, + mergeItem: (value: string, callback?: ?(error: ?Error) => void): Promise, + removeItem: (callback?: ?(error: ?Error) => void): Promise +} + +function useAsyncStorage(key: string): AsyncStorageHook { + return { + getItem: (...args) => AsyncStorage.getItem(key, ...args), + setItem: (...args) => AsyncStorage.setItem(key, ...args), + mergeItem: (...args) => AsyncStorage.mergeItem(key, ...args), + removeItem: (...args) => AsyncStorage.removeItem(key, ...args) + } +} + +module.exports = { + default: AsyncStorage, + useAsyncStorage +} From 90122eccd2c1d9decd849871b9318a1f824dde0a Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Tue, 26 Feb 2019 13:50:11 +0000 Subject: [PATCH 02/11] Fix export and typings --- README.md | 1 - lib/AsyncStorage.js | 31 ++++++++++++++++++------------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 760a0b8e..31381f10 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,6 @@ import { useAsyncStorage } from '@react-native-community/async-storage'; const readItemFromStorage = async () => { const item = await getItem(); console.log(item); - // here you can save it to component state } useEffect(() => { diff --git a/lib/AsyncStorage.js b/lib/AsyncStorage.js index 1ab6962e..552b63df 100644 --- a/lib/AsyncStorage.js +++ b/lib/AsyncStorage.js @@ -367,23 +367,28 @@ function convertError(error): ?Error { return out; } -type AsyncStorageHook = { - getItem: (callback?: ?(error: ?Error, result: string | null) => void): Promise, - setItem: (value: string, callback?: ?(error: ?Error) => void): Promise, - mergeItem: (value: string, callback?: ?(error: ?Error) => void): Promise, - removeItem: (callback?: ?(error: ?Error) => void): Promise -} +type AsyncStorageHook = { + getItem: ( + callback?: ?(error: ?Error, result: string | null) => void, + ) => Promise, + setItem: ( + value: string, + callback?: ?(error: ?Error) => void, + ) => Promise, + mergeItem: ( + value: string, + callback?: ?(error: ?Error) => void, + ) => Promise, + removeItem: (callback?: ?(error: ?Error) => void) => Promise, +}; -function useAsyncStorage(key: string): AsyncStorageHook { +export function useAsyncStorage(key: string): AsyncStorageHook { return { getItem: (...args) => AsyncStorage.getItem(key, ...args), setItem: (...args) => AsyncStorage.setItem(key, ...args), mergeItem: (...args) => AsyncStorage.mergeItem(key, ...args), - removeItem: (...args) => AsyncStorage.removeItem(key, ...args) - } + removeItem: (...args) => AsyncStorage.removeItem(key, ...args), + }; } -module.exports = { - default: AsyncStorage, - useAsyncStorage -} +export default AsyncStorage; From 700ec431e3def75f802a22dc149525fcbcffb483 Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 11:39:49 +0000 Subject: [PATCH 03/11] Link to hooks documentation --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 31381f10..8e8ca937 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,8 @@ getData = async () => { ### useAsyncStorage hook +From React 16.8 onwards, you can use the new hooks API. React hooks allow you to use state and async requests without writing a class. For more info on hooks and how to use them, see [hooks documentation](https://reactjs.org/docs/hooks-intro.html). + ```js import { useEffect } from 'react'; import { useAsyncStorage } from '@react-native-community/async-storage'; From 3122ed800bb6bd18f48de0787b5dc8daa6cfd492 Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 14:34:15 +0000 Subject: [PATCH 04/11] Add a specific async storage example --- README.md | 21 ++++----- docs/API.md | 125 +++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 114 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 8e8ca937..a1cf9fcd 100644 --- a/README.md +++ b/README.md @@ -56,24 +56,21 @@ getData = async () => { ### useAsyncStorage hook -From React 16.8 onwards, you can use the new hooks API. React hooks allow you to use state and async requests without writing a class. For more info on hooks and how to use them, see [hooks documentation](https://reactjs.org/docs/hooks-intro.html). +React hooks (introduced in 16.8) allow you to use state and async requests without writing a class. For more info on hooks and how to use them, see [hooks documentation](https://reactjs.org/docs/hooks-intro.html) or the [hooks example](docs/Hooks.md) in this repo. + +`useAsyncStorage` has no hard-coded dependencies in react hooks, it is just a convenience wrapper around `AsyncStorage`. ```js -import { useEffect } from 'react'; import { useAsyncStorage } from '@react-native-community/async-storage'; ``` ```jsx - const { getItem } = useAsyncStorage('@storage_key'); - - const readItemFromStorage = async () => { - const item = await getItem(); - console.log(item); - } - - useEffect(() => { - readItemFromStorage(); - }, []); +const { + getItem, + setItem, + mergeItem, + removeItem +} = useAsyncStorage('@storage_key'); ``` See docs for [api and more examples.](docs/API.md) diff --git a/docs/API.md b/docs/API.md index b3d177a1..eb35dd06 100644 --- a/docs/API.md +++ b/docs/API.md @@ -13,6 +13,7 @@ - [multiRemove](#multiRemove) - [clear](#clear) - [flushGetRequests](#flushGetRequests) + - [hooks](#hooks)
@@ -28,7 +29,7 @@ Fetches a data for a given `key`, invokes (optional) callback once completed. static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise ``` -**Returns**: +**Returns**: `Promise` with data, if exists, `null` otherwise. @@ -44,7 +45,7 @@ getMyValue = async () => { } console.log('Done'.) - + } ``` @@ -78,7 +79,7 @@ setValue = async () => { } catch(e) { // save error } - + console.log('Done.') } ``` @@ -181,7 +182,7 @@ removeValue = async () => { } catch(e) { // remove error } - + console.log('Done.') } ``` @@ -260,7 +261,7 @@ getMultiple = async () => { // read error } console.log(values) - + // example console.log output: // [ ['@MyApp_user', 'myUserValue'], ['@MyApp_key', 'myKeyValue'] ] } @@ -299,7 +300,7 @@ multiSet = async () => { } catch(e) { //save error } - + console.log("Done.") } @@ -372,31 +373,31 @@ mergeMultiple = async () => { } catch(e) { // error } - + console.log(currentlyMerged) // console.log output: - // [ - // [ + // [ + // [ // 'USER_1', - // { + // { // name:"Tom", // age:30, - // traits: { - // hair: 'brown' + // traits: { + // hair: 'brown' // eyes: 'blue' // } // } // ], - // [ + // [ // 'USER_2', - // { + // { // name:'Sarah', // age:26, // traits: { - // hair: 'green' + // hair: 'green' // } // } - // ] + // ] // ] } @@ -432,10 +433,10 @@ removeFew = async () => { } catch(e) { // remove error } - + console.log('Done') } - + ``` @@ -467,7 +468,7 @@ clearAll = async () => { } catch(e) { // clear error } - + console.log('Done.') } @@ -493,4 +494,88 @@ static flushGetRequests(): void **Returns**: -`undefined` \ No newline at end of file +`undefined` + + + + + +## `useAsyncStorageHook` + +Uses the new [hooks api](https://reactjs.org/docs/hooks-intro.html) to give you convenience functions to get, set, merge and delete a value from a location. + +The `useAsyncStorage` returns an object that exposes all all the methods that allow you to interact with the stored value. + +**Signature**: + +```js +static useAsyncStorage(key: string): { + getItem: ( + callback?: ?(error: ?Error, result: string | null) => void, + ) => Promise, + setItem: ( + value: string, + callback?: ?(error: ?Error) => void, + ) => Promise, + mergeItem: ( + value: string, + callback?: ?(error: ?Error) => void, + ) => Promise, + removeItem: (callback?: ?(error: ?Error) => void) => Promise, +} +``` + +**Returns**: + +`object` + +**Specific Example**: +You can replace your `App.js` with the following to see it in action. + +```jsx +import React, { useState, useEffect } from 'react'; +import { View, Text, TouchableOpacity } from 'react-native'; +import { useAsyncStorage } from '@react-native-community/async-storage'; + +export default function App() { + const [value, setValue] = useState('value'); + const { getItem, setItem } = useAsyncStorage('@storage_key'); + + const readItemFromStorage = async () => { + const item = await getItem(); + setValue(item); + }; + + const writeItemToStorage = async newValue => { + await setItem(newValue); + setValue(newValue); + }; + + useEffect(() => { + readItemFromStorage(); + }, []); + + return ( + + Current value: {value} + + writeItemToStorage( + Math.random() + .toString(36) + .substr(2, 5) + ) + } + > + Update value + + + ); +} +``` + +In this example: + +1. On mount, we read the value at `@storage_key` and save it to the state under `value` +2. When pressing on "update value", a new string gets generated, saved to async storage, and to the component state +3. Try refreshing the app with `cmd + R` - you'll see that the last value is still being read from async storage \ No newline at end of file From 0da654ffe8bebb01e6357aeb1709717ea1f0efff Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 14:41:33 +0000 Subject: [PATCH 05/11] Move hooks to a separate file --- babel.config.js | 2 +- lib/AsyncStorage.js | 28 +--------------------------- lib/hooks.js | 25 +++++++++++++++++++++++++ lib/index.js | 4 ++++ 4 files changed, 31 insertions(+), 28 deletions(-) create mode 100644 lib/hooks.js create mode 100644 lib/index.js diff --git a/babel.config.js b/babel.config.js index 10c6c10e..b3bd9654 100644 --- a/babel.config.js +++ b/babel.config.js @@ -5,7 +5,7 @@ module.exports = { 'module-resolver', { alias: { - '@react-native-community/async-storage': './lib/AsyncStorage', + '@react-native-community/async-storage': './lib/index', }, cwd: 'babelrc', }, diff --git a/lib/AsyncStorage.js b/lib/AsyncStorage.js index 552b63df..e049d1f9 100644 --- a/lib/AsyncStorage.js +++ b/lib/AsyncStorage.js @@ -42,7 +42,7 @@ type MultiRequest = {| * * See http://facebook.github.io/react-native/docs/asyncstorage.html */ -const AsyncStorage = { +export default { _getRequests: ([]: Array), _getKeys: ([]: Array), _immediate: (null: ?number), @@ -366,29 +366,3 @@ function convertError(error): ?Error { out.key = error.key; return out; } - -type AsyncStorageHook = { - getItem: ( - callback?: ?(error: ?Error, result: string | null) => void, - ) => Promise, - setItem: ( - value: string, - callback?: ?(error: ?Error) => void, - ) => Promise, - mergeItem: ( - value: string, - callback?: ?(error: ?Error) => void, - ) => Promise, - removeItem: (callback?: ?(error: ?Error) => void) => Promise, -}; - -export function useAsyncStorage(key: string): AsyncStorageHook { - return { - getItem: (...args) => AsyncStorage.getItem(key, ...args), - setItem: (...args) => AsyncStorage.setItem(key, ...args), - mergeItem: (...args) => AsyncStorage.mergeItem(key, ...args), - removeItem: (...args) => AsyncStorage.removeItem(key, ...args), - }; -} - -export default AsyncStorage; diff --git a/lib/hooks.js b/lib/hooks.js new file mode 100644 index 00000000..1ce9b910 --- /dev/null +++ b/lib/hooks.js @@ -0,0 +1,25 @@ +import AsyncStorage from './AsyncStorage'; + +type AsyncStorageHook = { + getItem: ( + callback?: ?(error: ?Error, result: string | null) => void, + ) => Promise, + setItem: ( + value: string, + callback?: ?(error: ?Error) => void, + ) => Promise, + mergeItem: ( + value: string, + callback?: ?(error: ?Error) => void, + ) => Promise, + removeItem: (callback?: ?(error: ?Error) => void) => Promise, +}; + +export function useAsyncStorage(key: string): AsyncStorageHook { + return { + getItem: (...args) => AsyncStorage.getItem(key, ...args), + setItem: (...args) => AsyncStorage.setItem(key, ...args), + mergeItem: (...args) => AsyncStorage.mergeItem(key, ...args), + removeItem: (...args) => AsyncStorage.removeItem(key, ...args), + }; +} \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 00000000..b5e6536f --- /dev/null +++ b/lib/index.js @@ -0,0 +1,4 @@ +import AsyncStorage from './AsyncStorage'; + +export { useAsyncStorage } from './hooks' +export default AsyncStorage; From 27e214dee8f04277fb5975beab2925882d329442 Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 15:15:43 +0000 Subject: [PATCH 06/11] Fix entry point --- lib/index.js | 6 ++---- package.json | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/index.js b/lib/index.js index b5e6536f..b1752582 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,4 +1,2 @@ -import AsyncStorage from './AsyncStorage'; - -export { useAsyncStorage } from './hooks' -export default AsyncStorage; +export default from './AsyncStorage'; +export { useAsyncStorage } from './hooks'; diff --git a/package.json b/package.json index 97ed0a73..7677e5c4 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@react-native-community/async-storage", "version": "1.0.1", "description": "Asynchronous, persistent, key-value storage system for React Native.", - "main": "lib/AsyncStorage.js", + "main": "lib/index.js", "author": "Krzysztof Borowy ", "contributors": [], "homepage": "https://github.com/react-native-community/react-native-async-storage#readme", From 6eb494fdc386984c399f7b5adaab70c59f759ea5 Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 15:18:38 +0000 Subject: [PATCH 07/11] Use named export --- lib/AsyncStorage.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/AsyncStorage.js b/lib/AsyncStorage.js index e049d1f9..528a0a46 100644 --- a/lib/AsyncStorage.js +++ b/lib/AsyncStorage.js @@ -42,7 +42,7 @@ type MultiRequest = {| * * See http://facebook.github.io/react-native/docs/asyncstorage.html */ -export default { +const AsyncStorage = { _getRequests: ([]: Array), _getKeys: ([]: Array), _immediate: (null: ?number), @@ -366,3 +366,6 @@ function convertError(error): ?Error { out.key = error.key; return out; } + + +export default AsyncStorage; \ No newline at end of file From b3a7649b690974e0a5f3217b74fe3885b07253ac Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 15:20:50 +0000 Subject: [PATCH 08/11] Fix missing newline --- lib/AsyncStorage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/AsyncStorage.js b/lib/AsyncStorage.js index 528a0a46..7ef5e1bf 100644 --- a/lib/AsyncStorage.js +++ b/lib/AsyncStorage.js @@ -368,4 +368,4 @@ function convertError(error): ?Error { } -export default AsyncStorage; \ No newline at end of file +export default AsyncStorage; From 89d5670ec59f029958a88f41f495dd799727cd35 Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 15:22:27 +0000 Subject: [PATCH 09/11] Remove an unnecessary newline --- lib/AsyncStorage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/AsyncStorage.js b/lib/AsyncStorage.js index 7ef5e1bf..47690974 100644 --- a/lib/AsyncStorage.js +++ b/lib/AsyncStorage.js @@ -367,5 +367,4 @@ function convertError(error): ?Error { return out; } - export default AsyncStorage; From 068fa56bb6d0f789027b132f7e5017932d00b7cb Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 15:35:15 +0000 Subject: [PATCH 10/11] Fix readme link --- docs/API.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/API.md b/docs/API.md index eb35dd06..2af6f867 100644 --- a/docs/API.md +++ b/docs/API.md @@ -13,7 +13,7 @@ - [multiRemove](#multiRemove) - [clear](#clear) - [flushGetRequests](#flushGetRequests) - - [hooks](#hooks) + - [useAsyncStorage](#useAsyncStorage)
@@ -500,7 +500,7 @@ static flushGetRequests(): void -## `useAsyncStorageHook` +## `useAsyncStorage` Uses the new [hooks api](https://reactjs.org/docs/hooks-intro.html) to give you convenience functions to get, set, merge and delete a value from a location. @@ -530,6 +530,7 @@ static useAsyncStorage(key: string): { `object` **Specific Example**: + You can replace your `App.js` with the following to see it in action. ```jsx From 2bfe68606126b650aac721ac62d55d158923b981 Mon Sep 17 00:00:00 2001 From: Kadi Kraman Date: Wed, 27 Feb 2019 19:44:24 +0000 Subject: [PATCH 11/11] Fix wording --- docs/API.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/API.md b/docs/API.md index 2af6f867..8176fb4c 100644 --- a/docs/API.md +++ b/docs/API.md @@ -502,9 +502,9 @@ static flushGetRequests(): void ## `useAsyncStorage` -Uses the new [hooks api](https://reactjs.org/docs/hooks-intro.html) to give you convenience functions to get, set, merge and delete a value from a location. +Uses the new [hooks api](https://reactjs.org/docs/hooks-intro.html) to give you convenience functions so you can get, set, merge and delete a value for a given key from Async Storage. -The `useAsyncStorage` returns an object that exposes all all the methods that allow you to interact with the stored value. +The `useAsyncStorage` returns an object that exposes all methods that allow you to interact with the stored value. **Signature**: @@ -579,4 +579,4 @@ In this example: 1. On mount, we read the value at `@storage_key` and save it to the state under `value` 2. When pressing on "update value", a new string gets generated, saved to async storage, and to the component state -3. Try refreshing the app with `cmd + R` - you'll see that the last value is still being read from async storage \ No newline at end of file +3. Try to reload your app - you'll see that the last value is still being read from async storage