Storing a function in the Redux store

Serialize JS functions to make it persistent in Redux store.

Thu, 18 May 2017

Redux is a predictable state container for Javascript. Redux state has to be serializable all the time.

Object serialization is the process of converting an object’s state to a string from which it can later be restored.

So, if you are trying to store a function inside the Redux state, you need to serialize them before persisting.

Storing functions inside redux state is not a best practice in general. So try to avoid it.

Javascript functions can be serialized quite easily, the challenge is in retrieving them from the store to execute.

Below are the helper functions for persisting functions inside Redux state.

  //Returns a string
  export const serializeFunction = (func) => (func.toString());
  //serializeFunction(()=>console.log('Hello!!'))
  // Output ==> "()=>console.log('Hello!!')"

The function to be stored in the state should be converted into string using serializeFunction.

  //Returns a function
  export const deserializeFunction = (funcString) => (new Function(\`return ${funcString}\`)());

Convert the string from the redux store into a function using deserializeFunction

Loading...
Prasanna

Prasanna is a full stack web developer, loves to build user interfaces with Javascript. Considers himself as a geek, quick learner and a team player 😃

  • rants and writings through personal experience