Can I use variables as data storage in React? Instead of Redux / Local Storage?-CodePudding

I'm building a movie catalog project. The frontend displays the list of movies, and each movie icon can be clicked into to show more information. The tech stack is MERN (mongodb, express, react, node)

On app start, my frontend calls the backend API to get the relevant data. Can I simply define a global variable to save the data instead of using local storage of redux?

I am currently just defining the data as a global variable that is created on app start, and lives throughout the app's lifetime. Is there any downside here? Should I use redux or local storage instead? Why?

// So for example, say I instantiate a class to hold my data, and export it on app start

export class DataStorage {

    private _data: MovieData | null;
    constructor() {
         this._data = null
    }

    public get data() return this._data;
    public set data(data) this._data = data;

}

// This instance is created on app start
export MyAppData = new DataStorage();

// Start of application
App() => {

     // Gets data from backend,
     const data = getDataFromBackEnd();
     MyAppData.data = data; // Data is loaded

}

// Some props that use the data
Modal() => (

  <div> {MyAppData.data.movie[0].name} </div>
)



The data is something along the lines of:

{
  movies: {
        
        name: string,
        desc: string,
        imageSrc: string,
        longDesc: string,
        actorIds: string,

  }[],
  actors: {
        name: string,
        DOB: string,
        hobbies: string,
  }[]
}

CodePudding user response：

Yes and no.

Yes, of course you can do that.

No, because your UI would not know that that global variable changes (and which part of it) - and then it would not know if it had to rerender a certain component using that state or not.

All that said, you might be considering this because Redux seems like a lot of code and very complicated.

Seeing that you are still using class components (which are getting less and less common and are not supported by most new libraries in the ecosystem), you might also be writing a very bulky and outdated style of Redux.

Modern Redux does not use switch..case reducers, ACTION_TYPES, immutable reducer logic, createStore and only uses connect/mapStateToProps to support class components (which you nowadays really should not be writing any more).

As a consequence it's more readable and about 1/4 of the code. I'd highly recommend you to check out the official Redux tutorial to learn modern Redux.

CodePudding user response：

Yes you can, if you're willing to delay all rendering until the data is fetched. But it's a bit unusual and not recommended. You would need to learn the "redux way" of fetching data and rendering it in components anyway. Once to know how to do this, it becomes second nature and there simply wouldn't be any reason to deviate from the pattern.

But for learning purposes, here's what you could do:

import React from 'react';
import ReactDOM from 'react-dom';

const sleep = (delay, value) => new Promise((resolve) => setTimeout(() => resolve(value), delay));

// Simulate this request takes 2 seconds
const getDataFromBackend = () => sleep(2000, [{value: 1}, {value: 2}]);

const data = getDataFromBackend();

const App = ({ data }) => <div>{JSON.stringify(data, null, 2)}</div>

data.then((dataFromBackend) => {
    ReactDOM.render(<App data={dataFromBackend} />, document.querySelector('#root'));
});