I am developing a React Native App and I am implementing my redux store. And I was wondering if I can store a React Component in the redux initial state like this in my reducer :

import Tache from '../components/Tache';
const initialState = {
    tache : [
        <Tache props={{
            nom : "Nom", 
            id: "0", 
            isDetail : false, 
            parentFunction : ()=> {return null}, 
            listeMembre : ["Hugo", "Theo"], 
            desc : "Description", 
            date : "Date", 
            url : "www"
        }}/>
    ]
}

It works for me but I am wondering if it's a good practise or not at all

CodePudding user response：

Redux is just javascript. You can put whatever you want in there - functions, Dates, Sets, even entire component trees.

However, if you ever want to persist your state - i.e. save it to the device when the app is backgrounded, and reload it when the app is foregrounded - the data must all be serializeable. That means that JSON.parse(JSON.stringify(data)) must return the original data. This only works on primitives, and arrays and objects that hold primitives.

That's why it's considered bad practice to put anything else into your state. It also keeps your state from having "too much responsibility"; your state should tell your components what to display, and not handle any of the actual display.

CodePudding user response：

No, Very bad practice. You should store only data in the redux not the jsx code.

CodePudding user response：

why do you want to do this? I don't think that's the best practice, if you want to use the component multiple times you can implement conditional logic for that and make this component dependent on its result.

CodePudding user response：

Redux or any global state management library is just for data management(add/delete/update etc), not for components storing.