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

hairmot · Accepted Answer · 2017-08-22 11:33:52Z

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, 2017 at 11:33

hairmot

2,9551 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ArunValaven Over a year ago

Can i use redux axios to make post call to my local php server..? If any code sample will helpful to me..

hairmot Over a year ago

sounds reasonable. I haven't used axios - i'd suggest creating a separate question for this with the axios tag

Shubham Jain Over a year ago

@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 github.com/mzabriskie/axios#axios-api. Send all of your data inside the data section of the request.

ArunValaven Over a year ago

@ShubhamJain... Thanks

Jamal Ashraf · Accepted Answer · 2022-07-26 13:34:12Z

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

}

Lalli Nuorteva · Accepted Answer · 2017-08-22 11:30:36Z

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, 2017 at 11:30

Lalli Nuorteva

1637 bronze badges

1 Comment

ArunValaven Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related