React + Redux connect (mapStateToProps)

Question

I recently started working with React, and I like it a lot, although I constantly run into problems.

---

Component # 1 , where I make a GET request with the click of a button, and I display some data in a table.

Component No. 2 is an input field in which I want to enter some data and display it below, should it just be right?

---

When I submit the action and finish my GET request, the state is as follows:

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

Then I want to move on to another component. Should I unsubscribe? Because when I go to another page where my other component is located, the state will remain.

If I send an action to my component # 2 , the state is as follows:

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

In both components I use mapStateToPros , although I really don’t understand how it works, and that’s where and why I encounter problems that I believe.

 function mapStateToProps(state) { return state; } 

It just returns the state at the moment. And when I switch between components, I get error messages. If I send an action to my component # 2, and then try to go to my component # 1 (GET-REQUEST), I get the following:

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

Go to another page

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

How to use mapStateToProps in my script?

Do i need to use componentWillUnmount? Unsubscribe from my store?

I feel that I can ask a hundred questions, but I won’t. I read the documentation all the time, but I'm still trying to figure it out.

Any links, thought process tips and other useful things are greatly appreciated.

EDIT:

This is my gearbox:

As shown below, Ricky , I need to make my array in an object.

  case ADD_TODO: return [ ...state, todo(undefined, action) ] const todo = (state = [], action) => { case ADD_TODO: return { id: action.id, text: action.text } } 

But the “distribution operator” will not work if I return an object instead of an array. Is there any other option (...)?

Answer 1

This is an array:

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

Make it an object:

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

And do not disconnect from the state. Redux stores all state in one object. Each component selectively declares which state properties they need for the function (mapStateToProps) provided in Redux connect ().

Edit

In response to an update to the question, you are passing an array for the default state. Use object:

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

You might want to initialize the default state properties in your reducer. But all this is in the docs / examples.

Oh, and if you ask me for more advice, this will be kindly provided for promotion :)