How to implement redux persist with redux saga?

Question

Right now I'm trying to integrate redux persist to my redux-saga in react native. I'm already trying some code in CreateStore. My app can run, but the reducer always reset after reloading the app.

This is my code

// CreateStore.js
import { applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { persistStore, persistCombineReducers } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import Reactotron from "reactotron-react-native";

const config = {
  key: 'root',
  storage: AsyncStorage,
};

// creates the store
export default (rootReducer, rootSaga) => {
  /* ------------- Redux Configuration ------------- */
  const middleware = []
  const enhancers = []

  /* ------------- Saga Middleware ------------- */
  const sagaMiddleware = createSagaMiddleware()
  middleware.push(sagaMiddleware)

  /* ------------- Assemble Middleware ------------- */
  enhancers.push(applyMiddleware(...middleware))


  const reducers = persistCombineReducers(config, rootReducer);
  const persistConfig = { enhancers };

  const store = Reactotron.createStore(rootReducer, compose(...enhancers));
  persistStore(store);

  // kick off root saga
  sagaMiddleware.run(rootSaga)

  return { store };
}

// app.js
import React, { Component } from "react";
import { Provider } from "react-redux";
import Reactotron from "reactotron-react-native";

import createStore from '../src/Redux'
import PrimaryNav from "../src/navigations/AppNavigations";


export default class App extends Component {
  render() {
    const { store } = createStore()
    console.log = Reactotron.log
    console.disableYellowBox = true;

    return (
      <Provider store={store}>
        <PrimaryNav />
      </Provider>
    );
  }
}

Does anyone have a clue for solving this issue? I want the reducer keep the previous data before reloading the app.

Thanks, Everyone

score 1 · Answer 1 · answered May 15 '19 at 03:51

Ok, I finally can use redux persist with redux saga. This is my last code

import { applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import Reactotron from "reactotron-react-native";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
}

// creates the store
export default (rootReducer, rootSaga) => {
  /* ------------- Redux Configuration ------------- */
  const middleware = []
  const enhancers = []

  /* ------------- Saga Middleware ------------- */
  const sagaMiddleware = createSagaMiddleware()
  middleware.push(sagaMiddleware)

  /* ------------- Assemble Middleware ------------- */
  enhancers.push(applyMiddleware(...middleware))

  const persistedReducer = persistReducer(persistConfig, rootReducer)
  const store = Reactotron.createStore(persistedReducer, compose(...enhancers));
  const persistor = persistStore(store)

  // kick off root saga
  sagaMiddleware.run(rootSaga)

  return { store, persistor };
}

There is no 'createStore' in Reactotron – Chervin Tanilon Apr 23 '21 at 05:17 — Chervin Tanilon, Apr 23 '21 at 05:17

How to implement redux persist with redux saga?

1 Answers1