react-redux - Redux-Persist 不持久
问题描述
我有一个从 Microsoft TypeScript-React-Starter 项目开始的 React/Typescript 项目:
- “反应”:“^16.7.0”,
- “反应域”:“^16.7.0”
- “redux-persist”:“^5.10.0”
- “打字稿”:“^3.2.2”
- “反应减少”:“^6.0.0”
目的是存储和持久化安全配置。
我遵循了 redux-persit 文档,但由于某种原因,信息没有被持久化。
我错过了什么?
redux/Security/Actions/ActionTypes.tsx:
export enum SecurityActionTypes {
SAVE = 'SAVE'
}
export interface ISecurityAction {
type: SecurityActionTypes.SAVE;
payload: ISecurityPayload;
}
export interface ISecurityPayload {
username: string;
password: string;
token: string;
}
redux/Security/Actions/ActionCreators.tsx:
import { ISecurityAction, ISecurityPayload, SecurityActionTypes } from './ActionTypes';
export function saveToken(param: ISecurityPayload): ISecurityAction {
return {
type: SecurityActionTypes.SAVE,
payload: param
};
}
redux/Security/Reducer/Reducer.tsx
import { ISecurityAction, ISecurityPayload, SecurityActionTypes } from '../../Actions/Security/ActionTypes';
const emptySecurity: ISecurityPayload = { username: '', password: '', token: '' };
export const initialState: ISecurityState = {
security: emptySecurity
};
export interface ISecurityState {
security: ISecurityPayload;
}
export function reducer(state = initialState, action: ISecurityAction) {
switch (action.type) {
case SecurityActionTypes.SAVE:
return Object.assign({}, state, action.payload);
default:
return state;
}
}
redux/Reducer/RootReducer.tsx
import { combineReducers } from 'redux';
import * as fromBreadCrumbs from './BreadCrumbs/Reducer';
import * as fromSecurity from './Security/Reducer';
export interface IRootState {
breadCrumbsState: fromBreadCrumbs.IBreadCrumbsState;
securityState: fromSecurity.ISecurityState;
}
export const rootInitialState: IRootState = {
breadCrumbsState: fromBreadCrumbs.initialState,
securityState: fromSecurity.initialState
};
export const rootReducer = combineReducers<IRootState>({
breadCrumbsState: fromBreadCrumbs.reducer,
securityState: fromSecurity.reducer
});
redux/Store/Store.tsx
import { createStore } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import { IRootState, rootReducer } from '../Reducers/RootReducer';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
key: 'root',
debug: true,
storage
};
const persistedReducer = persistReducer<IRootState, any>(persistConfig, rootReducer);
export default () => {
const store = createStore<IRootState, any, any, any>(persistedReducer);
const persistor = persistStore(store);
return { store, persistor };
};
src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import SecuredRoute from './components/SecuredRoute/SecuredRoute';
import CreateStore from './redux/Store/Store';
const { persistor, store } = CreateStore();
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<BrowserRouter>
<SecuredRoute path="/" component={App} />
</BrowserRouter>
</PersistGate>
</Provider>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
解决方案
我安装了 redux-logger,这有助于理解问题: - 我在有效负载上出错,因为我忘记添加“安全”参数。
进行了以下更改:
redux/Security/Actions/ActionTypes.tsx:
export enum SecurityActionTypes {
SAVE = 'SAVE'
}
export interface ISecurityAction {
type: SecurityActionTypes.SAVE;
payload: { security: ISecurityPayload };
}
export interface ISecurityPayload {
username: string;
password: string;
token: string;
}
redux/Security/Actions/ActionCreators.tsx:
import { ISecurityAction, ISecurityPayload, SecurityActionTypes } from './ActionTypes';
export function saveToken(param: ISecurityPayload): ISecurityAction {
return {
type: SecurityActionTypes.SAVE,
payload: {
security: param
}
};
}
推荐阅读
- azure-active-directory - azure AD 中的 SAML 用途和身份验证
- r - 加快解包聚合数据
- tcp - 在 CANoe 仿真中向节点发送数据
- excel - 动态列作为 sumif 函数中的标准
- python - 尝试创建数组时出现无效索引错误
- r - 有没有办法计算 R 中多个因变量的阈值以上的峰值数量?
- audio - 使用 ALSA 的音频捕获浮点格式 - 无法设置格式
- php - 如何在php中将二进制字符串转换为普通字符串
- javascript - React - Object(...) 不是函数或其返回值不可迭代
- javascript - JavaScript:删除具有低 IMDb 评级的电影博客内容