React-Reduxは毎日1回しかポップアップを表示しません

Question

私はReactアプリケーションを持っており、状態はReduxストアを通じて維持されています。私は最初にサイトを読み込む毎日一度だけポップアップメッセージをユーザーに表示したい。

ローカルストレージを使用して、最後のポップアップがいつだったかを覚えて、最後のポップアップの表示日が今日でない場合にのみポップアップを表示することが理想的です。

私は、これを行うための反応が遅い方法があるかどうか、そしてこれに既に利用可能なライブラリがあるかどうかを知りたいと思います。

Answer 1

ストアの状態（またはその一部）をローカルストレージに保存するために使用できるquite a few librariesがあります。

多分、一番人気のあるのはredux-persistです。あなたはそれを使用するような何か行うことができます：

import { combineReducers } from 'redux' 
import { persistStore, persistReducer } from 'redux-persist' 
import storage from 'redux-persist/es/storage' 

const modalReducer = (state = {}, action) => { 
    switch (action.type) { 
    case 'SHOW_MODAL': 
     return { 
     ...state, 
     display: true, 
     lastShown: new Date() 
     } 
    case 'HIDE_MODAL': 
     return { 
     ...state, 
     display: false 
     } 
    default: 
     return state 
    } 
} 

const modalPersistConfig = { key: 'modal', blacklist: ['display'], storage } 

const rootReducer = combineReducers({ 
    modal: persistReducer(modalPersistConfig, modalReducer) 
    // other reducers 
}) 

const store = createStore(reducer) 
persistStore(store) 

を次に、あなたは、店舗（store.getState().modal.lastShown）で日付を確認することができますし、それが今日の日付でなければSHOW_MODALアクションを派遣します。