Skip to content

Commit

Permalink
Refactor and perf improve Rehydration (#1121)
Browse files Browse the repository at this point in the history
  • Loading branch information
borisyankov authored Sep 4, 2017
1 parent cf72c8e commit ee0cd34
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 52 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,8 @@
"denmark", "copenhagen", "unregister", "gcm", "unstarMessage", "Unstar", "wildcard_mentioned",
"lightbox", "resize", "remobile", "multiline", "uniqby", "zoe", "localizable", "appid", "apns",
"Entypo", "msup", "mrow", "webview", "js", "timerow", "reselect", "addons", "cancelable",
"gravatar_hash", "pms", "msgs", "collapsable", "const", "wildcard", "reactotron", "camelcase"
"gravatar_hash", "pms", "msgs", "collapsable", "const", "wildcard", "reactotron", "camelcase",
"hydrator"
],
"skipIfMatch": [
"http://[^s]*",
Expand Down
38 changes: 38 additions & 0 deletions src/StoreHydrator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/* @flow */
import React, { PureComponent } from 'react';
import { Provider } from 'react-redux';

import store, { restore } from './store';

import LoadingScreen from './start/LoadingScreen';
import Providers from './Providers';

export default class StoreHydrator extends PureComponent {
state: {
isHydrated: boolean,
};

state = {
isHydrated: false,
};

componentWillMount() {
restore(() => {
this.setState({ isHydrated: true });
});
}

render() {
const { isHydrated } = this.state;

if (!isHydrated) {
return <LoadingScreen />;
}

return (
<Provider store={store}>
<Providers />
</Provider>
);
}
}
20 changes: 3 additions & 17 deletions src/ZulipMobile.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
/* @flow */
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import React from 'react';
import { Sentry } from 'react-native-sentry';

import '../vendor/intl/intl';
import store, { restore } from './store';
import Providers from './Providers';
import StoreHydrator from './StoreHydrator';
import config from './config';

require('./i18n/locale');
Expand All @@ -16,16 +14,4 @@ if (config.enableSentry) {
Sentry.config(config.sentryKey).install();
}

export default class ZulipMobile extends Component {
componentWillMount() {
restore();
}

render() {
return (
<Provider store={store}>
<Providers />
</Provider>
);
}
}
export default () => <StoreHydrator />;
7 changes: 0 additions & 7 deletions src/app/appReducers.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const initialState: AppState = {
composeTools: false,
eventQueueId: null,
editMessage: null,
isHydrated: false,
isOnline: true,
isActive: true,
lastActivityTime: new Date(),
Expand All @@ -46,12 +45,6 @@ export default (state: AppState = initialState, action: Action) => {
...state,
needsInitialFetch: !!action.apiKey,
};
case REHYDRATE:
return {
...state,
needsInitialFetch: !!getAuth(action.payload).apiKey,
isHydrated: true,
};
case REALM_INIT:
return {
...state,
Expand Down
4 changes: 0 additions & 4 deletions src/app/appSelectors.js

This file was deleted.

10 changes: 1 addition & 9 deletions src/compose/ComposeMenuContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';
import { connectActionSheet } from '@expo/react-native-action-sheet';

import { getAuth } from '../selectors';
import boundActions from '../boundActions';
import ComposeMenu from './ComposeMenu';

Expand All @@ -16,14 +15,7 @@ const componentStyles = StyleSheet.create({
},
});

export default connect(
state => ({
auth: getAuth(state),
isHydrated: state.app.isHydrated,
needsInitialFetch: state.app.needsInitialFetch,
}),
boundActions,
)(props => (
export default connect(null, boundActions)(props => (
<View style={componentStyles.wrapper}>
<ConnectedComposeMenu {...props} />
</View>
Expand Down
13 changes: 2 additions & 11 deletions src/nav/AppContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ import AppWithNavigationState from './AppWithNavigationState';
import { getAuth } from '../selectors';
import { registerAppActivity } from '../utils/activity';
import { checkCompatibility } from '../api';
import LoadingScreen from '../start/LoadingScreen';
import CompatibilityScreen from '../start/CompatibilityScreen';
import { Auth, Actions } from '../types';

type Props = {
auth: Auth,
isHydrated: boolean,
needsInitialFetch: boolean,
actions: Actions,
};
Expand All @@ -37,9 +35,9 @@ class AppContainer extends PureComponent {
};

handleConnectivityChange = isConnected => {
const { actions, needsInitialFetch, isHydrated } = this.props;
const { actions, needsInitialFetch } = this.props;
actions.appOnline(isConnected);
if (isHydrated && !needsInitialFetch && isConnected) {
if (!needsInitialFetch && isConnected) {
actions.trySendMessages();
}
};
Expand Down Expand Up @@ -86,12 +84,6 @@ class AppContainer extends PureComponent {
};

render() {
const { isHydrated } = this.props;

if (!isHydrated) {
return <LoadingScreen />;
}

const { compatibilityCheckFail } = this.state;

if (compatibilityCheckFail) {
Expand All @@ -109,7 +101,6 @@ class AppContainer extends PureComponent {
export default connect(
state => ({
auth: getAuth(state),
isHydrated: state.app.isHydrated,
needsInitialFetch: state.app.needsInitialFetch,
}),
boundActions,
Expand Down
1 change: 0 additions & 1 deletion src/selectors.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* @flow */
export * from './baseSelectors';
export * from './app/appSelectors';
export * from './account/accountSelectors';
export * from './conversations/conversationsSelectors';
export * from './caughtup/caughtUpSelectors';
Expand Down
2 changes: 1 addition & 1 deletion src/store.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import middleware from './middleware';
// compose(autoRehydrate(), applyMiddleware(...middleware)),
// );

const store = compose(autoRehydrate(), applyMiddleware(...middleware))(createStore)(rootReducer);
const store = compose(applyMiddleware(...middleware), autoRehydrate())(createStore)(rootReducer);

export const restore = (onFinished?: () => void) =>
persistStore(
Expand Down
1 change: 0 additions & 1 deletion src/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,6 @@ export type AccountState = Account[];

export type AppState = {
lastActivityTime: Date,
isHydrated: boolean,
isOnline: boolean,
isActive: boolean,
needsInitialFetch: boolean,
Expand Down

0 comments on commit ee0cd34

Please sign in to comment.