Use redux-persist instead of local DB for big data? React Native-CodePudding

I am using React Native and want to store notes locally and I was searching out what will be the best way to store data locally. So, first I thought of sql but it's little bit complex then I went towards redux and it's easy to use. So, what will be the best solution for it for large number of data??

CodePudding user response：

Redux (or MobX) and AsyncStorage would be the best choices to store data locally in React-Native for both iOS and Android.

I would personally recommend you go with Redux as it is easy to implement, use and persist (with AsyncStorage) and handles large amounts of data fairly well.

However, I do not recommend you store large amounts of data locally if this can be done server-side and only needed data is fetched locally.

Only store what is necessary locally to and fetch the rest whenever needed. Of course, this all depends on your app and the data in question. But my answer should cover the general usage of something like this.

CodePudding user response：

This is an example on how to use redux persist along with redux using AsyncStorage:

import 'react-native-gesture-handler'
import React from "react";
import AsyncStorage from '@react-native-async-storage/async-storage'
import { Provider } from 'react-redux'
import { createStore, compose, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
//store all your reducers here
import reducers from './src/Redux/reducers'
import { PersistGate } from 'redux-persist/lib/integration/react'
import createSagaMiddleware from 'redux-saga';
//React navigation
import Navigation from "./src/Navigation";
import rootSaga from './src/Redux/Sagas';

const sagaMiddleware = createSagaMiddleware()

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  //an array that has whichever reducers you want to persist
  whitelist: ['BananaReducer'],
}

const persistedReducer = persistReducer(persistConfig, reducers)

const store = createStore(
  persistedReducer,
  {},
  compose(applyMiddleware(sagaMiddleware)),
)

sagaMiddleware.run(rootSaga)

export default function App() {
  const persistor = persistStore(store)

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Navigation />
      </PersistGate>
    </Provider>
  )
}