Can We store a React Component in Redux Initial State

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

Upvotes: 0

Views: 1123

Answers (4)

Abe
Abe

Reputation: 5508

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.

Upvotes: 3

Hamid khan
Hamid khan

Reputation: 185

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

Upvotes: 0

Antonio Rodr&#237;guez
Antonio Rodr&#237;guez

Reputation: 135

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.

Upvotes: 1

Pankaj Shrivastava
Pankaj Shrivastava

Reputation: 130

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

Upvotes: 1

Related Questions