Storing a function in the Redux store
2 minutes read
tech javascript

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 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

Prasanna is a full stack web developer, with exposure to various programming languages. Uses mostly Java, Javascript these days and got ~13 years of architecting and coding enterprise software solutions.