如何阻止 redux-form 的“表单”状态被 redux-persit 自动补水

IT技术 reactjs redux redux-form
2021-05-09 08:34:37

我正在使用 redux-form,它提供了一个内置的 reducer,称为“formReducer”,需要向组合的 reducer 注册以使用 redux 的存储管理表单状态。

我还使用 redux-persist 来持久化 redux 存储。

当我不想让我的表单自动重新填充用户在页面重新加载或页面刷新时输入的数据时出现的问题。在我自己编写的普通 reducer 中,我可以简单地为“REHYDRATE”类型的操作添加一个 switch case(由 redux-persit 调度),以防止状态切片通过返回其初始状态或空状态来自动重新水化。但是redux-form的formReducer是redux-form内置提供的,所以我无法更改。那么,有没有办法“自定义”redux-form reducer 来添加那个 switch case?或者,有什么方法可以将 redux-persist 配置为不自动重新水合特定状态切片,或者有什么方法可以将 redux-form 配置为不通过页面重新加载或页面刷新自动填充?

3个回答

我有一个基于@jpdelatorre 建议的“完美”解决方案,来自这个线程How to handle redux-form/CHANGE in reducer

基本上它是“扩展”redux-form提供的formReducer,然后为事件“REHYDRATE”添加switch case:

import { reducer as reduxFormReducer } from 'redux-form'
import { REHYDRATE } from 'redux-persist/constants'

const formPlugin = {
    my_redux_form_name: (state, action) => {
        switch (action.type) {
            case REHYDRATE:
                return {}

            default:
                return state
        }
    }
}

const formReducer = reduxFormReducer.plugin(formPlugin)
export default formReducer

然后让扩展的减速器注册到根减速器。

import formReducer from './form.reducer'
const rootReducer = combineReducers({
    ...other reducers,
    form: formReducer
})

如果您使用的是最新的 (v5) redux-persist 版本,则在 persistConfig 选项中有一个白名单键选项,您可以将哪些减速器应该被持久化/再水化。你应该使用它,例如:

const persistConfig = { key: 'root_key_in_localstorage', storage, whitelist: ['session'], }

你可以使用一个中间件来处理这个特定的动作类型并防止它被传递给减速器。

const myMiddleWare = store => next => action => {
  if(action.type != 'REHYDRATE'){
     next(action); // pass the action forward to the reducers
  } else{
    // do your logic here, you can use store.dispatch to dispatch other actions
    // when your not invoking  next(action) this action won't pass through to all the reducers
  }
}