React + Redux connect (mapStateToProps)

Question

Niedawno zacząłem pracować z Reactem i bardzo mi się to podoba, mimo że ciągle mam problemy.

---

Składnik # 1 gdzie robię Get-wniosek kliknięcie przycisku i wyświetlać niektóre dane w tabeli.

Komponent # 2 to pole wprowadzania, w którym chcę wprowadzić dane i wyświetlić je poniżej, powinno być proste, prawda?

---

Kiedy wysyłką działanie, a skończyłem Get-prośbę, stan wygląda następująco:

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

Następnie chcę, aby przejść do mojego innego składnika. Czy muszę zrezygnować z subskrypcji tutaj? Ponieważ po przejściu na moją drugą stronę, gdzie znajduje się mój drugi składnik, stan pozostanie.

Gdybym wysyłką działanie na moim składnika # 2 stan wygląda następująco:

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

w obu składników używam mapStateToPros, choć tak naprawdę nie rozumiem, jak to działa i to gdzie i dlaczego napotykam na problemy, w które wierzę.

function mapStateToProps(state) { 
    return state; 
} 

Po prostu przywraca stan. A kiedy przełączam się między komponentami, otrzymuję komunikaty o błędach. Gdybym wysyłką działanie na moim składnika # 2, a następnie spróbuj przejść do mojego składnika # 1 (get-request) będę się następujące elementy:

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"}] 

nawigację do innej stronie

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

W jaki sposób powinienem użyć mapStateToProps w moim scenariuszu?

Czy muszę używać componentWillUnmount? Czy zrezygnuj z subskrypcji mojego sklepu?

Czuję, że mogę zadać sto pytań, ale nie będę. Ciągle czytam dokumentację, ale wciąż próbuję to rozgryźć.

Wszelkie linki, porady dotyczące procesu myślowego i inne użyteczne rzeczy są bardzo dobrze przemyślane.

EDIT:

To mój reduktor:

Jak Ricky sugerowane poniżej, muszę zrobić moją tablicę do obiektu.

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


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

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

Ale "operator rozprzestrzeniania" nie zadziała, jeśli zwrócę obiekt zamiast tablicy. Czy istnieje wtedy inna opcja (...)?

Answer 1

To jest tablicą:

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

sprawiają, że obiekt:

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

I nie "wypisz się" od państwa. Redux przechowuje wszystkie stany w jednym obiekcie. Każdy składnik wybiórczo deklaruje, jakie właściwości stanu potrzebują w funkcji (mapStateToProps) dostarczonej do połączenia Redux().

Edit

W odpowiedzi aktualizacja pytanie - są przechodzącą w tablicy do stanu domyślnego. Użyj obiektu:

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; 
    } 
} 

Możesz chcieć zainicjować domyślne właściwości stanu w swoim reduktorze. Ale wszystkie te rzeczy są w dokumentach/przykładach.

Aha, i jeśli pytasz mnie o więcej rad, to dzięki uprzejmości upvote :)