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

【问题标题】：How to store es6 map using redux persist?如何使用 redux persist 存储 es6 地图？
【发布时间】：2018-05-19 11:06:13
【问题描述】：

我正在尝试使用 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;

我想将 subevents 属性存储为 (Date, Array) 的 Map。知道为什么这不起作用吗？

【问题讨论】：

这有关系吗？ github.com/rt2zz/redux-persist/issues/223
是的，我确实看过它，但它不是我想要的。知道如何解决这个问题吗？
JSON.parse(new Map(state.subevents)) 你正在解析一个Map，当你应该解析一个JSON 字符串时

标签： javascript reactjs ecmascript-6 redux

【解决方案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 映射，您必须将它们转换为数组才能正确保存它们。此外，您不需要转换为 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'] }
);

【讨论】：