React Redux initialState vs defaultProps

Question

Sto cercando le migliori pratiche di definizione di oggetti di scena predefiniti per Container (che è componenti intelligenti connessi con il redux store), e scopro che ci sono almeno due approcci su come realizzarlo.

1. Per utilizzare InitialState nel mio riduttore:

const initialState = { 
    name: 'John' 
}; 

export default function userState (state = initialState, action) {...} 

2. Per utilizzare defaultProps

User.defaultProps = { 
    name:'John' 
}; 

quale è il migliore e perché?

Answer 1

La cosa più importante è rimanere coerenti per tutto il progetto.

Penso che il primo approccio abbia il vantaggio o l'archiviazione di tutto ciò che riguarda un negozio in un singolo file. Il tuo riduttore userState è dove qualcuno potrebbe andare e guarda per sapere come viene aggiornato in base a un tipo di azione. Sembra giusto andare lì per vedere come viene avviato anche.

Answer 2

È necessario utilizzare lo stato iniziale. Il concetto alla base di redux e di ogni altra libreria che gestisce lo stato dell'applicazione è la rigorosa separazione tra dati/modello e vista. Questi concetti rendono più facile ragionare sul codice, riutilizzare le visualizzazioni e verificarle in modo indipendente.

Se si utilizza Redux, consiglierei di gestire i dati (e i dati predefiniti) all'interno di Redux.

Esempi di casi di test separati:

test('state test', t => { 
    t.deepEqual(userState(undefined, { type: '@@INIT' }), { name: 'John' }); 
    t.deepEqual(
     userState({ name: 'John' }, { type: 'SET NAME', name: 'Isa' }), 
     { name: 'Isa' } 
    ); 
}); 

test('view test', t => { 
    t.true(render(<User name="John" />).text().includes('John')); 
}); 

Answer 3

penso che tu frainteso due concetti diversi.

Puntelli in contenitori/componenti è solo un modo per dire ai componenti come dovrebbe apparire o gestire alcuni eventi. Ma gli oggetti di scena di default non dovrebbero contenere la business logic e dati aziendali condivisi, come userInformation.

Se si dispone di dati come userInformation, importanti non solo per il contenitore utente, ma anche utili per altri componenti, archiviare tali informazioni solo nel punto vendita.

Answer 4

Questa spiegazione mi ha aiutato a ottenere davvero la differenza tra props e state, quindi lascerò questo qui.

Dan Abramov, il creatore di Redux, mettiamola così su Twitter, se non ricordo male:

dovrei utilizzare sullo stato dei componenti per memorizzare X?

• Se posso calcolare X da oggetti di scena -> No.
• Se sono non utilizzando X nel metodo render -> No.
• Else -> Sì.

Dan stava parlando di stato del componente qui, piuttosto che defaultProps, ma il principio in questo caso è lo stesso.

Il punto di Redux è di avere un'unica fonte di verità per lo stato dell'applicazione. Quindi nel tuo esempio vorrai memorizzare i tuoi valori predefiniti (come name: John) nel negozio Redux. Gli oggetti vengono sempre trasferiti dal negozio, ma se si specifica defaultProps, lo stato dell'applicazione viene archiviato all'esterno dello store; non sarà gestito dal tuo riduttore.