How to save redux store objects to external JSON file..?

Question

I am having redux store as object key value pairs as given below:

{
  "appElements": {
    "layers": {
      "layer_1": {
        "scene": {
          "width": "100px",
          "height": "100px",
          "bgColor": "#aaaaaa",
          "bgImage": "http:bgimage1.png"
        },
        "items": {
          "yrgroih9": {
            "width": "100px",
            "x": "200px"
          },
          "qhy0dukj": {
            "width": "100px",
            "x": "200px"
          },
          "7lw2nvma": {
            "width": "100px",
            "x": "200px"
          }
        }
      }
    }
  }
}

I am using Immutable Js and the above data stored as Immutable Map data type into store.

Below image shows the state structure for better understanding:

I need to save the above given store values into external json file, for example mysavedfile.json.

Code used in react reducer:

import { Map, fromJS, isImmutable } from 'immutable';

export default function images(state = new Map(), action) {
  switch (action.type) {

    case 'ADD_LAYERS':
      return fromJS({ appElements:action.data.appElements });

    case 'STATE_TO_JSON_FILE':
      console.log("state");
      //Here i need to do code to save state to external json file.

    default:
      return state
  }
}

How to achieve this..?

score 2 · Accepted Answer · answered Aug 22 '17 at 11:33

2

You won't be able to create a file directly on your computer's file system as this would be a huge security risk. You cannot do this from a web page using JavaScript.

You could write a server side service to post your state to and it creates a file - you may then download the file or be content with where your server side stores it.

You could alternatively create a file in memory and prompt a user download - for more answers like this see Create a file in memory for user to download, not through server

answered Aug 22 '17 at 11:33

hairmot

2,975
1
13
26

Can i use redux axios to make post call to my local php server..? If any code sample will helpful to me.. – ArunValaven Aug 22 '17 at 12:05
sounds reasonable. I haven't used axios - i'd suggest creating a separate question for this with the axios tag – hairmot Aug 22 '17 at 12:20
@ArunValaven you can make a post request and send all the store data on that route and then inside of that request you could write data onto the file. You might wanna check this for axios https://github.com/mzabriskie/axios#axios-api. Send all of your data inside the data section of the request. – Shubham Jain Aug 22 '17 at 13:06
@ShubhamJain... Thanks – ArunValaven Aug 28 '17 at 07:23

score 0 · Answer 2 · answered Aug 22 '17 at 11:30

0

Your reducers should be pure and create a new state based on the action. To export the state as a JSON you should use selectors.

answered Aug 22 '17 at 11:30

Lalli Nuorteva

163
7

1. So the given reducers is not pure.? 2. Already state created as given above. 3. How to use selectors..? Please give your one sample code or any website link to save store as json file. – ArunValaven Aug 22 '17 at 11:43

Jamal Ashraf · Answer 3 · 2022-07-26T13:34:12.753

HACK SOLUTION: Example from my REAL project! Save Redux store objects to external JSON file.

STEP-1 import useStore first from react-redux and then getState() function is used to access store state.

STEP-2 area is the name of my slice in Redux store and areaName is state in that slice.

STEP-3 FiletoSave variable is used to export JSON file with data from store.

import { useStore } from "react-redux";

const exportJsonFileFromStore = () => {

const store = useStore();
const FileSaver = require('file-saver');    
    
function exportData() {
   
    const filename = 'filter_settings';

    let prepareObject = {       // It is used to make a JSON object 
      areaName:store.getState().area.areaName  ,   
    }
    const fileToSave = new Blob([JSON.stringify(prepareObject)], {
        type: 'application/json'
    });
    // this will save file
    FileSaver.saveAs(fileToSave, filename);
}

return (
  
        <button onClick={(event: any) => exportData()}>Click me to download!</button>
   
)

}

How to save redux store objects to external JSON file..?

3 Answers3