{"id":189589,"date":"2021-02-26T16:00:06","date_gmt":"2021-02-26T13:00:06","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-persist-your-redux-store-cloudsavvy-it\/"},"modified":"2021-02-26T16:00:06","modified_gmt":"2021-02-26T13:00:06","slug":"how-to-persist-your-redux-store-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/","title":{"rendered":"#How to Persist Your Redux Store \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a297dfa61b1d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a297dfa61b1d\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#Creating_Your_Store\" >Creating Your Store<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#Adding_Redux_Persist\" >Adding Redux Persist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#Configuring_Redux_Persist\" >Configuring Redux Persist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#The_Persistor_Object\" >The Persistor Object<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#State_Reconciliation\" >State Reconciliation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#Migrating_Your_State\" >Migrating Your State<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#Applying_Transformations\" >Applying Transformations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-persist-your-redux-store-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Persist Your Redux Store \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9781\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/dce8fbc5c266913b843a55bbcab1f0e5\/p\/uploads\/2021\/02\/99128fa6.jpg\" alt=\"Illustration showing the Redux logo\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Redux simplifies state management in complex <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lications. As the Redux store contains your app\u2019s entire state, persisting it lets you save and restore the user\u2019s session.<\/p>\n<h2 id=\"creating-your-store\"><span class=\"ez-toc-section\" id=\"Creating_Your_Store\"><\/span>Creating Your Store<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We\u2019ll assume you\u2019re familiar with Redux fundamentals.<\/p>\n<p>For this tutorial, we\u2019ll use a barebones store with a naive reducer.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createStore<span class=\"br0\">}<\/span> from <span class=\"st0\">\"redux\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>authenticated<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> reducer <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span>state<span class=\"sy0\">,<\/span> action<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">state<\/span><span class=\"sy0\">,<\/span> ...<span class=\"me1\">action<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> store <span class=\"sy0\">=<\/span> createStore<span class=\"br0\">(<\/span>reducer<span class=\"sy0\">,<\/span> state<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This trivial example sets the stage for a Redux store that can track whether we\u2019re logged in. Most users will expect to remain signed in when they return to your app. At the moment, the state is created anew each time the app loads, so users will only remain authenticated within the current session.<\/p>\n<h2 id=\"adding-redux-persist\"><span class=\"ez-toc-section\" id=\"Adding_Redux_Persist\"><\/span>Adding Redux Persist<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/rt2zz\/redux-persist\">Redux Persist<\/a> is a popular library which lets you add persistence to the store. The library will automatically save the store each time the state updates. You don\u2019t need to write any persistence code in your actions or reducers.<\/p>\n<p>Begin by installing Redux Persist using npm:<\/p>\n<pre>npm install redux-persist<\/pre>\n<p>You now need to connect the library to your store. Wrap your root reducer using Redux Persist\u2019s <code>persistReducer<\/code> function. This lets Redux Persist inspect the actions you dispatch to your store. You\u2019ll also need to call <code>persistStore()<\/code> to start off the persistence.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createStore<span class=\"br0\">}<\/span> from <span class=\"st0\">\"redux\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>persistStore<span class=\"sy0\">,<\/span> persistReducer<span class=\"br0\">}<\/span> from <span class=\"st0\">\"redux-persist\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> storage from <span class=\"st0\">\"redux-persist\/lib\/storage\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>authenticated<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> reducer <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span>state<span class=\"sy0\">,<\/span> action<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">state<\/span><span class=\"sy0\">,<\/span> ...<span class=\"me1\">action<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> persistConfig <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    key<span class=\"sy0\">:<\/span> <span class=\"st0\">\"root\"<\/span><span class=\"sy0\">,<\/span>\n    storage\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> persistedReducer <span class=\"sy0\">=<\/span> persistReducer<span class=\"br0\">(<\/span>persistConfig<span class=\"sy0\">,<\/span> reducer<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> store <span class=\"sy0\">=<\/span> createStore<span class=\"br0\">(<\/span>persistedReducer<span class=\"sy0\">,<\/span> state<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> persistor <span class=\"sy0\">=<\/span> persistStore<span class=\"br0\">(<\/span>store<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This configuration is now ready to use. With only a few lines of code, we\u2019ve ensured any Redux state changes will be persisted automatically. Users will stop getting signed out each time they reload your app.<\/p>\n<p>Our reducer is enhanced by <code>persistReducer()<\/code> to include persistence support. This newly wrapped reducer is then passed to <code>createStore()<\/code> instead of the original. Finally, <code>persistStore()<\/code> is called, passing in the store instance, to enable persistence.<\/p>\n<h2 id=\"configuring-redux-persist\"><span class=\"ez-toc-section\" id=\"Configuring_Redux_Persist\"><\/span>Configuring Redux Persist<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>persistReducer()<\/code> function accepts a configuration object as its first parameter. You must specify the <code>key<\/code> and <code>storage<\/code> properties.<\/p>\n<p><code>key<\/code> sets the name of the top-level property in the persisted object. Your store\u2019s state will be saved as the value of this property.<\/p>\n<p><code>storage<\/code> defines the storage engine to use. Redux Persist supports multiple different <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/rt2zz\/redux-persist#storage-engines\">storage backends<\/a> depending on the environment. For web use, the <code>localStorage<\/code> and <code>sessionStorage<\/code> APIs are both supported as well as basic cookies. Options are also available for React Native, Node.js, Electron and several other platforms.<\/p>\n<p>You define the storage engine to use by importing it from its package. Its main API-implementing object must then be passed as the <code>storage<\/code> option to Redux Persist.<\/p>\n<p>You can implement your own storage engine to use a custom persistence mechanism. Create an object with <code>setItem()<\/code>, <code>getItem()<\/code> and <code>removeItem()<\/code> methods. Redux Persist is asynchronous so each method must return a Promise that resolves when the operation is complete.<\/p>\n<h2 id=\"the-persistor-object\"><span class=\"ez-toc-section\" id=\"The_Persistor_Object\"><\/span>The Persistor Object<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>persistor<\/code> object returned from <code>persistStore()<\/code> calls has a few utility methods to let you manage persistence.<\/p>\n<p>You can pause and resume persistence using the <code>pause()<\/code> and <code>resume()<\/code> methods respectively. You can force an im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>te write to the storage engine with <code>flush()<\/code>. This can be helpful if you need to guarantee your state is persisted after a particular operation.<\/p>\n<p>You can purge all persisted data from the storage engine using <code>.purge()<\/code>. In most cases, this should be avoided \u2013 you should use a Redux action to clear your store, which would then automatically propagate to the persisted data.<\/p>\n<h2 id=\"state-reconciliation\"><span class=\"ez-toc-section\" id=\"State_Reconciliation\"><\/span>State Reconciliation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Redux Persist supports three different ways of hydrating your store from persisted state. Hydration occurs automatically when you call <code>persistStore()<\/code> and existing data is found in the storage engine. Redux Persist needs to inject that initial data into your store.<\/p>\n<p>The default strategy is to merge objects up to one level deep. Any nested objects won\u2019t be merged \u2013 the incoming change will overwrite anything already in your state.<\/p>\n<ul>\n<li><strong>Persisted state:<\/strong> <code>{\"demo\": {\"foo\": \"bar\"}}<\/code><\/li>\n<li><strong>State in store:<\/strong> <code>{\"demo\": {\"example\": test\"}}<\/code><\/li>\n<li><strong>Resulting hydrated store:<\/strong> <code>{\"demo\": {\"foo\": \"bar\"}}<\/code><\/li>\n<\/ul>\n<p>You may optionally switch to merging objects up to levels deep. Import the new state reconciler and add it to your store\u2019s configuration:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"co1\">\/\/ usual imports omitted<\/span>\n<span class=\"kw5\">import<\/span> autoMergeLevel2 from <span class=\"st0\">\"redux-persist\/lib\/stateReconciler\/autoMergeLevel2\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> persistConfig <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    key<span class=\"sy0\">:<\/span> <span class=\"st0\">\"root\"<\/span><span class=\"sy0\">,<\/span>\n    storage<span class=\"sy0\">,<\/span>\n    stateReconciler<span class=\"sy0\">:<\/span> autoMergeLevel2\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ store configuration omitted<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Here\u2019s what the result of <code>autoMergeLevel2<\/code> would be when hydrating the example above:<\/p>\n<ul>\n<li><strong>Persisted state:<\/strong> <code>{\"demo\": {\"foo\": \"bar\"}}<\/code><\/li>\n<li><strong>State in store:<\/strong> <code>{\"demo\": {\"example\": test\"}}<\/code><\/li>\n<li><strong>Resulting hydrated store:<\/strong> <code>{\"demo\": {\"foo\": \"bar\", \"example\": \"test\"}}<\/code><\/li>\n<\/ul>\n<p>The values of the <code>demo<\/code> properties from the two sources are combined in the hydration.<\/p>\n<p>Use the <code>hardSet<\/code> reconciler if you want to disable merging altogether. This will replace the store\u2019s state with the contents of the storage engine. This is often undesirable as it makes migrations more complicated \u2013 if you add a new initial property to your state, it will be unset for existing users as soon as their session hydrates.<\/p>\n<h2 id=\"migrating-your-state\"><span class=\"ez-toc-section\" id=\"Migrating_Your_State\"><\/span>Migrating Your State<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>On the subject of migrations, Redux Persist has built-in support for upgrading persisted state to a new version. Sometimes you might replace properties with newer alternatives. You need to be sure that existing users won\u2019t have to reset your app to keep using it.<\/p>\n<p>Migrations are configured using the <code>migrate<\/code> configuration key. The simplest approach is to pass a function which takes the state as a parameter and returns the migrated state. You also need to set the <code>version<\/code> configuration key so that Redux Persist can identify when migrations are needed. Each time the <code>version<\/code> changes, your migration function will be called.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> persistConfig <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    key<span class=\"sy0\">:<\/span> <span class=\"st0\">\"root\"<\/span><span class=\"sy0\">,<\/span>\n    storage<span class=\"sy0\">,<\/span>\n    version<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span>\n    migrate<span class=\"sy0\">:<\/span> <span class=\"br0\">(<\/span>state<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">state<\/span><span class=\"sy0\">,<\/span> oldProp<span class=\"sy0\">:<\/span> <span class=\"kw2\">undefined<\/span><span class=\"sy0\">,<\/span> newProp<span class=\"sy0\">:<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>As an alternative to the function approach, you may pass an object that enables individual migration functions to be created for each version step. This must be passed to the <code>createMigrate()<\/code> function before being handed to Redux Persist\u2019s configuration.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"co1\">\/\/ other imports omitted<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createMigrate<span class=\"br0\">}<\/span> from <span class=\"st0\">\"redux-persist\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> migrations <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"nu0\">1<\/span><span class=\"sy0\">:<\/span> state <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">state<\/span><span class=\"sy0\">,<\/span> extraProp<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"nu0\">2<\/span><span class=\"sy0\">:<\/span> state <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">state<\/span><span class=\"sy0\">,<\/span> extraProp<span class=\"sy0\">:<\/span> <span class=\"kw2\">undefined<\/span><span class=\"sy0\">,<\/span> extraPropNew<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> persistConfig <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    key<span class=\"sy0\">:<\/span> <span class=\"st0\">\"root\"<\/span><span class=\"sy0\">,<\/span>\n    storage<span class=\"sy0\">,<\/span>\n    version<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span>\n    migrate<span class=\"sy0\">:<\/span> createMigrate<span class=\"br0\">(<\/span>migrations<span class=\"br0\">)<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In this example, we\u2019re initialising the store as version 2. If the state already existed on the user\u2019s device as version 0, both migrations would be run. If the user was currently on version 1, only the last migration would run.<\/p>\n<h2 id=\"applying-transformations\"><span class=\"ez-toc-section\" id=\"Applying_Transformations\"><\/span>Applying Transformations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A final point to mention is that Redux Persist supports the use of \u201ctransformation\u201d functions. These are added to your configuration and allow you to manipulate the data that is saved or restored.<\/p>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/rt2zz\/redux-persist#transforms\">library\u2019s documentation<\/a> lists several popular transformations you can use. These let you automatically compress, encrypt or expire your persisted state, without having to implement any application-level logic yourself.<\/p>\n<p>Transformations are specified as an array in your configuration object. They are executed in the order given.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> persistStore <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    key<span class=\"sy0\">:<\/span> <span class=\"st0\">\"root\"<\/span><span class=\"sy0\">,<\/span>\n    storage<span class=\"sy0\">,<\/span>\n    transforms<span class=\"sy0\">:<\/span> <span class=\"br0\">[<\/span>MyTransformer<span class=\"br0\">]<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>To write your own transformer, use the <code>createTransform()<\/code> function. This is passed two functions and a configuration object:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createTransform<span class=\"br0\">}<\/span> from <span class=\"st0\">\"redux-persist\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> MyTransformer <span class=\"sy0\">=<\/span> createTransform<span class=\"br0\">(<\/span>\n    <span class=\"br0\">(<\/span>inboundState<span class=\"sy0\">,<\/span> key<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">inboundState<\/span><span class=\"sy0\">,<\/span> b64<span class=\"sy0\">:<\/span> btoa<span class=\"br0\">(<\/span>inboundState.<span class=\"me1\">b64<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"br0\">(<\/span>outboundState<span class=\"sy0\">,<\/span> key<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">outboundState<\/span><span class=\"sy0\">,<\/span> b64<span class=\"sy0\">:<\/span> atob<span class=\"br0\">(<\/span>outboundState.<span class=\"me1\">b64<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"br0\">{<\/span><span class=\"br0\">}<\/span>\n<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In this example, we store the <code>b64<\/code> property of our state as its Base64-encoded value. When the data is persisted to storage (<code>outboundState<\/code>), the value gets encoded. It is decoded when the persisted state is being hydrated (<code>inboundState<\/code>).<\/p>\n<p>The configuration object can be used to define a <code>whitelist<\/code> and <code>blacklist<\/code> of reducer names. The transformer would then only be used with reducers which match those constraints.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Redux Persist is a powerful library with a simple interface. You can setup automatic persistence of your Redux store in only a few lines of code. Users and developers alike will be thankful for its convenience.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/9778\/how-to-persist-your-redux-store\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Persist Your Redux Store \u2013 CloudSavvy IT&#8221; Redux simplifies state management in complex applications. As the Redux store contains your app\u2019s entire state, persisting it lets you save and restore the user\u2019s session. Creating Your Store We\u2019ll assume you\u2019re familiar with Redux fundamentals. For this tutorial, we\u2019ll use a barebones store with a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":189590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/dce8fbc5c266913b843a55bbcab1f0e5\/p\/uploads\/2021\/02\/99128fa6.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-189589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/189589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=189589"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/189589\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/189590"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=189589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=189589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=189589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}