rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.95k stars 866 forks source link

redux-persist v5 Didn't update componentWillReceiveProps #630

Open ito-star opened 6 years ago

ito-star commented 6 years ago

Hi, I am getting stuck in using redux-persist v5 in my react-native project. To resolve this problem, I bootstrapped myself by finding in this channel, but can't find exact solution yet. Please check my codebase and give me some ticket / full example. Hope to hear from you. Thanks

configureStore.js

import { persistStore, persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'

import app from '../reducers'

const config = {
  key: 'root',
  storage,
  whitelist: ['user']
}
const reducer = persistCombineReducers(config, app)

const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__})

export default configureStore = () => {
  const enhancer = compose(
    applyMiddleware(
      thunk,
      loggerMiddleware
    )
  )
  let store = createStore(reducer, enhancer)
  let persistor = persistStore(store)
  if(module.hot) {
    module.hot.accept(() => {
      const nextRootReducer = require('../reducers').default
      store.replaceReducer(nextRootReducer)
    })
  }
  return { persistor, store }
}

reducers.js

import routes from './routes'
import user from './user'
import expander from './expander'
import dose from './dose'

export default {
    routes,
    user,
    expander,
    dose
}

App.js

import { AppRegistry, StatusBar, Text } from 'react-native'
import { PersistGate } from 'redux-persist/es/integration/react'
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import App from './src'

import configureStore from './src/store/configureStore'

const onBeforeLift = () => {
  // take some action before the gate lifts
}
const { persistor, store } = configureStore()
class Main extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<Text>Loading...</Text>}
          onBeforeLift={onBeforeLift}
          persistor={persistor}
        >
          <App />
        </PersistGate>
      </Provider>
    )
  }
}
AppRegistry.registerComponent('persisttest', () => Main);

"react": 16.0.0 "react-native": 0.50.3 "react-redux": "^5.0.6" "redux": "^3.7.2" "redux-logger": "^3.0.6" "redux-persist": "^5.3.0-rc.2" "redux-thunk": "^2.2.0"

053steve commented 6 years ago

Hi @Goolzzi, I'm currently having the exact same problem. componentsWillRecieveProps not working after adding redux-persist. Can u please share how u manage to fix the problem. Thanks you :D

ito-star commented 6 years ago

Hi, @053steve It wasn't redux-persist problem. In my project, I have used react-native-router-flux and coded some actions in router component. When reducer updated, router component re-rendered so every Scene should be re-located in memory that was called componentDidMount in every components.

053steve commented 6 years ago

Hi @Goolzzi , thanks for the reply! From ur answer I was able to narrow down the source of my problem. As it turns out it wasn't redux-persist at all but it was my setup that was incorrect. My reducer was already combined using redux's "combineReducers". I had to use "persistReducer" instead of "persistCombineReducers". Thanks a lot mate.

runeogod commented 6 years ago

Any chance you can help me ? i have same issue as u have..

https://github.com/rt2zz/redux-persist/issues/649

Thanks

Base2526 commented 5 years ago

componentWillReceiveProps(nextProps){ console.log('componentWillReceiveProps : auth') console.log(nextProps) }

you forgot nextProps thx.