Redux-Persist не сохраняется

Question

У меня есть проект React / Typescript, запущенный с проектом Microsoft TypeScript-React-Starter:

• "реагировать": "^ 16.7.0",
• "реагировать-dom ":" ^ 16.7.0 "
• " redux-persist ":" ^ 5.10.0 "
• " машинопись ":" ^ 3.2.2 "
• «response-redux»: «^ 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();

Answer 1

Я установил redux-logger, который помог понять проблему: - У меня была ошибка в полезной нагрузке, поскольку я забыл добавить параметр 'security'.

Были внесены следующие изменения:

redux / Безопасность / Действия / 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 / Безопасность / Действия / ActionCreators.tsx:

import { ISecurityAction, ISecurityPayload, SecurityActionTypes } from './ActionTypes';

export function saveToken(param: ISecurityPayload): ISecurityAction {
  return {
    type: SecurityActionTypes.SAVE,
    payload: {
      security: param
    }
  };
}