redux 如何清除单击时的持久化状态

xtfmy6hx  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(182)

使用的语言:JS with REACT - REDUX TOOLKIT(在本例中为redux-persistent)
以下是上下文:我有一个表单,当用户刷新页面时,我用redux persistent保持状态。例如,我们有一个输入文本,用户写了一些东西。如果他刷新,文本将被保留
我的问题是:我有一个按钮。在点击我想清理状态和重置的形式到他的初始状态。
我只知道如何清除ALL redux持久化状态

<p onClick={() => persistor.purge()}> PURGE</p>

这是我的店

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';

// persistor import
 import { formReducer } from '../features/form.slice'; 
import { usersReducer } from '../features/users.slice'; 

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['users'],
};

const usersConfig = {
  key: 'users',
  storage,
  blacklist: ['usersToDelete'],
};

const appReducer = combineReducers({
  form: formReducer, 
  users: persistReducer(usersConfig , usersReducer),

});

const persistedReducer = persistReducer(persistConfig, appReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk],
});
export const persistor = persistStore(store);

这是我的纽扣

import React from 'react';

export const Reset= () => { 
  return (
    <button
      onClick={() => console.log('i want to reset the form state to his initial state')}
      className="button rounded "
    >
      Reset
    </button>
  );
};

也许我可以用redux-toolkit(resetForm)和onClick做一个动作,但是如何告诉redux-persistent清理呢?谢谢

rmbxnbpk

rmbxnbpk1#

正如您在本节末尾看到的那样,键入Persistor:
purge()方法只清除存储器的内容,保留redux的内部数据不变。要清除它,可以使用redux-reset模块。
您正在寻找如何重置redux表单状态的方法(并且它将自动持久化到存储中)。最好的方法是创建resetForm操作,并在reducer中将其状态设置为initialValue(空的未填充表单)。

oxosxuxt

oxosxuxt2#

您需要redux操作创建器,因为您希望:
1.将状态修改为其默认状态值
1.做副作用:调用持久化器.purge()
按钮onclick应调度操作创建器函数

相关问题