使用的语言: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清理呢?谢谢
2条答案
按热度按时间rmbxnbpk1#
正如您在本节末尾看到的那样,键入Persistor:
purge()
方法只清除存储器的内容,保留redux的内部数据不变。要清除它,可以使用redux-reset模块。您正在寻找如何重置redux表单状态的方法(并且它将自动持久化到存储中)。最好的方法是创建resetForm操作,并在reducer中将其状态设置为initialValue(空的未填充表单)。
oxosxuxt2#
您需要redux操作创建器,因为您希望:
1.将状态修改为其默认状态值
1.做副作用:调用持久化器.purge()
按钮onclick应调度操作创建器函数