sql >> データベース >  >> NoSQL >> MongoDB

ブラウザのリロード:選択したページに戻らず、デフォルトのホームページに移動します-ReactJs

    更新時にredux状態をローカルストレージに保持し、アプリの読み込み時にローカルストレージからストアを初期化する必要があります。

    最小限のReduxストアの永続性の例:

    localStorageへの永続的な状態更新を処理するための「中間」コンポーネントを作成します。

    import React, { useEffect } from 'react';
    import { useSelector } from 'react-redux];
    
    const StorePersister = ({ children }) => {
      const state = useSelector(state => state);
      useEffect(() => {
        localStorage.setItem('myState', JSON.stringify(state));
      }, [state]);
    
      return children;
    };
    

    index-Appをラップします ストア永続機能を備えたコンポーネント。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import App from './components/App';
    import StorePersister from './components/StorePersister';
    import store from "./store";
    
    ReactDOM.render(
      <Provider store={store}>
        <StorePersister>
          <App />
        </StorePersister>
      </Provider>,
      document.getElementById('root')
    );
    

    ローカルストレージから状態を初期化します。 「myState」キーがない場合、または解析でnullが返される場合 次に、空のオブジェクト({} )はフォールバックとして使用されます。

    import { createStore, applyMiddleware, compose } from "redux";
    import thunk from "redux-thunk";
    import rootReducer from "./reducers";
    
    const initialState = JSON.parse(localStorage.getItem('myState')) || {};
    
    const store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(thunk),
        (b&&a()) || compose
      )
    );
    
    export default store;
    

    redux-persist もあります 永続化され、永続化から初期化されるものを少しカスタマイズできるパッケージがあります。




    1. Redis:AmazonEC2とElasticache

    2. SQLのグループ連結のアナログ

    3. 自作を使用してmongoを2.6にアップグレードしましたが、接続できなくなりました

    4. mongodb:オブジェクトIDをBSON::ObjectIdに変換します