如何使用 redux persist 存储 es6 地图？

Question

我正在尝试使用 redux-persist 存储 ES6 地图，以便我的数据不会在页面刷新时丢失。 这是我试图使用的代码

const initialState = {
  subevents: new Map()
};

const subEventsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTIONS.SET_SUBEVENT: {
      const subevents = state.subevents;
      subevents.set(action.subevent.key, action.subevent);
      return {
        ...state,
        subevents
      }
    }
    default:
      return state;
  }
};

const transformSubeventMap = createTransform(
  (state) => {
    return { ...state, subevents: JSON.stringify([...state]) }
  },
  (state) => {
    console.log(state);
    return { ...state, subevents: JSON.parse(new Map(state.subevents)) }
  }
);

const subevents = persistReducer(
  {
    version: 1,
    key: 'subevents',
    storage,
    transforms: [transformSubeventMap],
    whitelist: ['subevents']
  },
  subEventsReducer
);

export default subevents;

我想将子事件属性存储为（日期，数组）的映射。 知道为什么这不起作用吗？

Answer 1

我没有试过你的代码，但我觉得你的变压器有错误。 您可能错过了添加subevents属性：

const transformSubeventMap = createTransform(
  (state) => {
    return { ...state, subevents: JSON.stringify([...state.subevents]) }
  },
  (state) => {
    console.log(state);
    return { ...state, subevents: JSON.parse(new Map(state.subevents)) }
  }
);

但这可能还不够。 由于redux-persist不处理 ES6 Maps，您必须将它们转换为数组以正确保存它们。 此外，您不需要转换为 JSON。

尝试这样的事情：

const transformSubeventMap = createTransform(
  (state) => {
    return { ...state, subevents: Array.from(state.subevents) }
  },
  (state) => {
    console.log(state);
    return { ...state, subevents: new Map(state.subevents) }
  }
);

您还可以将带有白名单的选项对象传递给转换器，使其更加简单：

const transformSubeventMap = createTransform(
  subeventsMap => Array.from(subeventsMap),
  subeventsArray => new Map(subeventsArray),
  { whitelist: ['subevents'] }
);