web-dev-qa-db-ja.com

取得したデータをリデュースせずにリアクションでキャッシュする方法

Reduxを使用して、共通のstoreがあり、場所を変更すると、たとえば/videosページですが、videosレデューサーで動画を取得しています。そのため、videosページに戻ることにした場合、ユーザーは既にストアからロードされたビデオを表示し、必要に応じてそれらをロードして保存します。

しかし、ReactでReduxなしで場所を変更した場合/videosいくつかのビデオを取得し、VideosPageコンポーネントのローカル状態に保存してからこのページに戻ったところ、ビデオはもうないので、ゼロから取得する必要があります。

どうすればそれらをキャッシュできますか？

PS：これはtheoreticalの質問なので、コードは提供されていません。

javascriptreactjscachingreact-reduxbrowser-cache
13
Den Gas

後でデータを再設定するときにデータを保存する最善の方法は、localStorageに保存することです。これにより、アプリを更新した後でもデータを取得できます。

const InitialState = {
   someState: 'a'
}
class App extends Component {

 constructor(props) {
  super(props);

  // Retrieve the last state
  this.state = localStorage.getItem("appState") ? JSON.parse(localStorage.getItem("appState")) : InitialState;

}

componentWillUnmount() {
  // Remember state for the next mount
  localStorage.setItem('appState', JSON.stringify(this.state));
}

render() {
  ...
 }
}

export default App;
9
Shubham Khatri

以下を使用してキャッシュできます。

1）ローカルストレージ

2）Reduxストア

3）マウントとアンマウントの間でデータを保持する

import React, { Component, PropTypes } from 'react';

// Set initial state
let state = { counter: 5 };

class Counter extends Component {

 constructor(props) {
  super(props);

  // Retrieve the last state
  this.state = state;

  this.onClick = this.onClick.bind(this);
}

componentWillUnmount() {
  // Remember state for the next mount
  state = this.state;
}

onClick(e) {
  e.preventDefault();
  this.setState(prev => ({ counter: prev.counter + 1 }));
}

render() {
  return (
    <div>
      <span>{ this.state.counter }</span>
      <button onClick={this.onClick}>Increase</button>
    </div>
  );
 }
}

export default Counter;
4
tarzen chugh

問題は、ナビゲートするとコンポーネントがアンマウントされることです。

アンマウントされないコンポーネントまでビデオの状態を持ち上げることができます。

または

Reduxを避け、ナビゲーションの処理方法に応じて、常にビデオコンテナをマウントし、ルートが一致する場合はvideosをレンダリングし、そうでない場合はnullを返します。

1
Eric Hasselbring