実戦計画-8

pwaとservice-worker

pwa webアプリケーションを適用するには、service-workerが必要です.しかし、私たちのアプリケーションの特性のため、インポートする必要があるデータは多くなく、ユーザーの使用に伴って、絶えず変化するページが最も核心的な機能です.したがって、キャッシュを重要に使用できる分野はないと思います.

redux-persistとerror境界

リフレッシュ後、reduxのstateデータが失われます...しかし、アプリケーションの特性上、ページをめくってreduxstateを使用する必要がある場合が多いため、特定のページでリフレッシュするとデータエラーが発生します.使用するデータはundefinedまたはnull...

は、データのエラーページ(ErrorBoundary.js)を初めて作成しました.
データエラーが発生した場合、以前は白い画面が表示されていましたが、エラーページを表示することで、ホームページに戻ってreduxstateを再調整したり、ユーザーにエラー後の状況を提供したりすることができます.
ErrorBoundaryはクラスコンポーネントを使用してコンポーネントDidCatchのライフサイクル関数を記述し、ユーザーはSentryに接続することでどのデータエラーを監視し、その後のエラー修復で簡単に操作することができます.

// App.js
...
return (
    <ErrorBoundary>
      ...
    </ErrorBoundary>
  );

// ErrorBoundary.js
...
class ErrorBoundary extends Component {
  state = {
    error: false,
  };

  componentDidCatch(error, info) {
    logger('에러가 발생했습니다.');
    logger({
      error,
      info,
    });
    this.setState({
      error: true,
    });
    if (process.env.NODE_ENV === 'production') {
      Sentry.captureException(error, { extra: info });
    }
  }

  render() {
    if (this.state.error) {
      return (
        <Cont>
          <ImgContainer src={LoginBackground}></ImgContainer>
          <Text
            type="contents"
            textAlign="center"
            fontSize="18px"
            fontWeight="500"
          >
            찾으시는 데이터가 없습니다.
          </Text>
          <Text
            type="contents"
            textAlign="center"
            fontSize="15px"
            fontWeight="500"
          >
            메인으로 돌아가기
          </Text>
          <Image
            src={Home}
            width="40px"
            height="40px"
            _onClick={() => {
              history.replace('/');
              window.location.reload();
            }}
          />
        </Cont>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

ErrorBoundaryを使用してエラー処理を行いましたが、エラーを発生させないことがもっと重要だと思います...
シナリオ1)ローカルDBを使用する.2)各ページはapiを呼び出してstateにデータを保存する.
各ページでapiを呼び出すには、バックエンドチームがサーバ負荷によって阻害され、レンダリングにデータが転送される速度が遅くなるため、2つの方法があります.
ローカルDBにデータを格納する必要があり、ログアウトしない場合は、データの保持を継続するためにローカルストレージを使用する必要があると考えられます.
私は本当に偶然Redux-Persist技術を発見しました.それはReduxをローカルDBに接続することができます.jsに適用されます.今更新しても間違いない!

キャッシュメモリAPI、IndexedDBがリポジトリとしても利用できるかどうかを考慮した.
ネットワークにロードされたリソースまたはファイルをキャッシュする必要がある場合は、キャッシュストレージAPIを使用することが望ましい.
IndexedDBは、受信したデータを実際のdbに格納するデータベースの形式です.ここまで保存する必要はありません.

// configStore.js

...
import { persistStore } from 'redux-persist';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import Exercise from './modules/exercise';
import User from './modules/user';
import Challenge from './modules/challenge';
import Feed from './modules/feed';
import Calendar from './modules/calendar';

export const history = createBrowserHistory();

const rootReducer = combineReducers({
  exercise: Exercise,
  user: User,
  feed: Feed,
  challenge: Challenge,
  calendar: Calendar,
  router: connectRouter(history),
});

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['exercise', 'challenge', 'feed'],
};

const enhancedReducer = persistReducer(persistConfig, rootReducer);

const middlewares = [thunk.withExtraArgument({ history: history })];

...

const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const enhancer = composeEnhancers(applyMiddleware(...middlewares));

let store = (initialStore) => createStore(enhancedReducer, enhancer);

export default store();

// index.js

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root'),
);