React + Redux connect (mapStateToProps)

Question

Ho recentemente iniziato a lavorare con React, e mi sto divertendo molto anche se sto incontrando problemi.

---

Componente # 1 dove faccio una GET-richiesta da un clic su un pulsante e visualizzare alcuni dati in una tabella.

Component # 2 è un campo di input, dove voglio inserire alcuni dati e visualizzarlo di seguito, dovrebbe essere semplice, giusto?

---

Quando ho spedizione un'azione, ed ho finito il mio GET-richiesta, stato in questo caso:

{ 
    isFetching: false, 
    isPressed: true, 
    items: [{item: 1}, {item: 2}, {item: 3}] 
} 

poi voglio navigare verso la mia altra componente. Devo annullare l'iscrizione allo stato qui? Perché quando navigo verso la mia altra pagina, dove è il mio altro componente, lo stato rimarrà.

Se la spedizione un'azione sul mio componente # 2 lo Stato si presenta così:

[ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
] 

In entrambi i componenti sto usando mapStateToPros, anche se io non capisco come funziona e questo è il motivo e il motivo per cui mi imbatto in problemi che credo.

function mapStateToProps(state) { 
    return state; 
} 

Restituisce appena lo stato al momento. E quando passo da un componente all'altro, otterrò messaggi di errore. Se ho la spedizione un'azione sul mio componente # 2 e quindi provare a navigare verso la mia componente # 1 (GET-RICHIESTA) mi metterò il seguente:

prev state Object { isFetching=false, isPressed=true, items=[10]} 
action Object { type="ADD_TODO", id=0, text="asd"} 
next state [Object { id=0, text="asd"}] 

Naviga fino altra pagina

Error: `mapStateToProps` must return an object. Instead received [object Object]. 

Come utilizzare mapStateToProps nel mio scenario?

Devo utilizzare componentWillUnmount? Annullare l'iscrizione al mio negozio?

Mi sento come se potessi fare un centinaio di domande, ma non lo farò. Sto leggendo costantemente la documentazione ma sto ancora cercando di capirlo.

Qualsiasi link, consigli sul processo di pensiero e altre cose utili sono molto apprezzabili.

EDIT:

Questo è il mio riduttore:

Come Ricky suggerito di seguito, ho bisogno di fare il mio array in un oggetto.

case ADD_TODO: 
     return [ 
      ...state, 
      todo(undefined, action) 
     ] 


    const todo = (state = [], action) => { 

     case ADD_TODO: 
      return { 
       id: action.id, 
       text: action.text 
      } 
    } 

Tuttavia, l'operatore di "spread" non funzionerà se restituisco un oggetto anziché un array. C'è un'altra opzione allora (...)?

Answer 1

Questo è un array:

[ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
] 

ne fanno un oggetto:

{ 
    myData: [ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
    ] 
} 

E non lo fanno "unsubscribe" da stato. Redux memorizza tutti gli stati in un oggetto. Ogni componente dichiara in modo selettivo quali proprietà di stato necessitano all'interno di una funzione (mapStateToProps) fornita a Redux connect().

Modifica

In risposta alla domanda l'aggiornamento - si passa in un array per lo stato di default. Utilizzare un oggetto:

const todo = (state = {}, action) => { 
    // initialize your default state properties 

    switch (action.type) { 
    case ADD_TODO: 
     return { 
      ...state 
      id: action.id, 
      text: action.text 
     } 
    default: 
     return state; 
    } 
} 

Si potrebbe desiderare di inizializzare le proprietà dello stato di default nel vostro riduttore. Ma tutta questa roba è nei documenti/esempi.

Oh, e se mi stai chiedendo per ulteriori consigli, si tratta di una cortesia per upvote :)