如何将函数存入Redux Store或localStorage以待后续执行？

嘿，这个问题其实挺常见的——Redux Store和localStorage的核心都是存储可序列化的数据，而JavaScript函数本身是没办法被JSON序列化的，这就是你直接存储时函数变成null，用JSON.stringify()后函数逻辑丢失的根本原因。

下面给你几个可行的解决方案，按推荐程度排序：

1. 存储函数标识+参数（最推荐） #

不要直接把函数存进Store，而是存储函数的唯一标识和它需要的执行参数。之后需要执行这个函数时，再根据标识找到对应的函数本体，传入参数执行。

举个具体的例子：

• 首先，把你要队列化的函数整理成一个全局可访问的映射表：

  // 全局或业务模块内可访问的函数映射表
  const actionFunctions = {
    afterOffline: (data) => { /* 你的afterOffline原逻辑 */ },
    offline: (data) => { /* 你的offline原逻辑 */ },
    online: () => { /* 你的online原逻辑 */ }
  };
  

• 存入Store时，只存标识和参数：

  store.dispatch({ 
    type: 'ADD_TO_ACTION_QUEUE', 
    payload: {
      funcType: 'afterOffline',
      data: 要传递的参数数据 // 这里是原函数需要的data
    } 
  });
  

• 后续需要执行队列里的函数时：

  // 从Store取出functionsQueue
  const { functionsQueue } = store.getState();
  functionsQueue.forEach(item => {
    // 根据标识找到函数并执行，?.避免标识不存在时报错
    actionFunctions[item.funcType]?.(item.data);
  });
  

这种方式完全符合Redux的设计理念（状态可序列化、可追溯），而且没有安全风险，是最优解。

2. 把函数转成字符串存储（不推荐，慎选） #

如果你确实需要直接存储函数的逻辑，可以先把函数转换成字符串，取出时再转回可执行的函数。但要注意：这种方式有安全风险，如果存储的字符串被篡改，eval()或new Function()会执行恶意代码，只在你完全信任存储内容的场景下使用。

示例代码：

• 存储时转成字符串：

  const fnStr = methodToQueue.afterOffline.toString();
  store.dispatch({ 
    type: 'ADD_TO_ACTION_QUEUE', 
    payload: fnStr 
  });
  

• 取出时转回函数并执行：

  const { functionsQueue } = store.getState();
  functionsQueue.forEach(fnStr => {
    // 用eval转回函数，注意包裹括号避免语法错误
    const fn = eval(`(${fnStr})`);
    fn(你的参数);
  });
  

3. 自定义Redux持久化的序列化逻辑（适用于redux-persist场景） #

如果你用redux-persist把Store持久化到localStorage，可以自定义serialize和deserialize函数来处理函数的序列化。本质上还是基于上面的字符串转换逻辑，但封装在持久化流程里：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
  // 自定义序列化：把队列里的函数转成字符串
  serialize: (state) => {
    const newState = {...state};
    newState.functionsQueue = newState.functionsQueue.map(fn => fn.toString());
    return JSON.stringify(newState);
  },
  // 自定义反序列化：把字符串转回函数
  deserialize: (str) => {
    const state = JSON.parse(str);
    state.functionsQueue = state.functionsQueue.map(fnStr => eval(`(${fnStr})`));
    return state;
  }
};

const persistedReducer = persistReducer(persistConfig, reducer);

同样，这种方式也要注意安全风险，而且会打破Redux状态的可预测性，非必要不推荐。

内容的提问来源于stack exchange，提问作者jsDev