Question

我有一个React应用程序，状态通过Redux存储进行维护。我想在他第一次加载网站时每天只向用户显示一条弹出消息。

理想的实现方法是使用本地存储来记住上次弹出窗口的时间，并仅在最后一个弹出窗口显示日期不是今天时显示弹出窗口。

我想知道是否有任何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操作，如果它不是今天的日期。

React-Redux每天只显示一次弹出窗口

1 个答案: