How to associate and react redux?

Hello, a question essence here in what.

When using reduxa I have a moment. For example, there is a simple reducer:
const initialStateUser = {
 user: {}
};

function userReducer(state=initialStateUser, action) {
 return state;
}

const rootReducer = combineReducers({
 user: userReducer,
...
});


Component of the tie:
const mapStateToProps = store => {
 return {
 user: store.user
};
};


In the end, to obtain some property, for example name of the user object, you have to write here this design:
this.props.user.user.name
because we have the object of userReducer wrapped in another object to rootReducer. You can of course give different names, but what it seems to me that I'm doing something wrong. Explain plz.
March 20th 20 at 11:40
1 answer
March 20th 20 at 11:42
Solution
const mapStateToProps = store => {
 return {
 user: store.user.user
};
};


Either
const initialStateUser = {
 name: "Bob"
};

const mapStateToProps = store => {
 return {
 user: store.user.user
};
};



Can't quite understand it, but when I did this component have ceased to see the changes in store. That is the other component changes the data, and this is not updated.


const initialStateUser = {
 name: "Bob"
};



actually I have a lot of users state this:
const initialStateUser = {
 users: []
}

you will not be the same for each user reducer to write - lexus.Denesik commented on March 20th 20 at 11:45
@Erica10, then already you've got there was an array of users, and in response there will be something else, and then another and another.

Set up a working example https://codesandbox.io - janiya.Brekke commented on March 20th 20 at 11:48
@luther_Keeling16, well, write - lexus.Denesik commented on March 20th 20 at 11:51
@luther_Keeling16, here is an example

https://codesandbox.io/s/w7q3xjm697

if you pass in the User as you wrote above, stops working - lexus.Denesik commented on March 20th 20 at 11:54
@Erica10, so you don't understand how the state in reacte. You can't change it, and you go and change. You need to create a new state object and return it, then there will be changes.

function userReducer(state = initialState, action) {
 const users = [...state.users];

 if (action.type === "DEC_AGE") {
 users[0].age += 1;

 return {
...state
users
};
}

 return state;
}


const mapStateToProps = store => {
 return {
 users: store.users.users
};
};


const users = this.props.users.map((item, index) => {
 return (
 <div key={index}>
 {item.name} - {item.age}
</div>
);
 });
- janiya.Brekke commented on March 20th 20 at 11:57
@luther_Keeling16, so I reducera return a new object, take an old state, change it and design new, then return - lexus.Denesik commented on March 20th 20 at 12:00
@luther_Keeling16, but I understand what is the essence, I have returned
return {...state users: state.users}
and need
return {...state, users}

but this record I can not understand. I thought that the returned object should be of the same structure, and the result was {user: [......]}, and became {[........]} - lexus.Denesik commented on March 20th 20 at 12:03
@luther_Keeling16, and it is unclear why one works and the second does not, because it turns out they both have to be non-working - lexus.Denesik commented on March 20th 20 at 12:06
@Erica10, you cheated on the current state, and returns a new, and therefore worked, but the shot in the leg not long to wait. You have to make a copy of the facility users, to work on it and return the new state.

return {...state, users} it says - I create an object, copy to all of the state and add a new field to users and replace the old, if it was. This is equivalent to:
return {...state, users: users}
return Object.assign({}, state, {users: users}); - janiya.Brekke commented on March 20th 20 at 12:09
@luther_Keeling16do not understand.

After all, users just an array of objects. Where did the key come from?

I thought
{...state, users}
this is equivalent to
{users:[], [.......]}
can't catch, as an array of objects of users turns into an object {users: [....]}
and all the same Object.assign is not the same as literals in the object design - lexus.Denesik commented on March 20th 20 at 12:12
@Erica10,
{users} is equivalent to {users: users}, this is a short entry.

[...users] is copying elements of one array to another array.

This is basic stuff to react not apply. You need to learn them. Re-read the article, perereca puzzles. - janiya.Brekke commented on March 20th 20 at 12:15
@luther_Keeling16realized this transformation, I really didn't know, so I could not understand, thanks for the help! - lexus.Denesik commented on March 20th 20 at 12:18
@luther_Keeling16, on your advice decided to learn some basic things and found that your code is const users = [...state.users]; doesn't make copies of the report, therefore, to continue changing himself state, so that the essence, probably not in that state or a copy you want to edit, and how to construct the returned object.

https://codesandbox.io/s/o5p26qwx5y - lexus.Denesik commented on March 20th 20 at 12:21
@Erica10, this line makes a copy of the users array. - janiya.Brekke commented on March 20th 20 at 12:24
@luther_Keeling16in the users array objects, this would work if there were primitive values. There are also links to the objects in state. - lexus.Denesik commented on March 20th 20 at 12:27
@Erica10, a reference to the object changed - janiya.Brekke commented on March 20th 20 at 12:30
@luther_Keeling16, links change, the objects remain the same. After the line const users = [...state.users]; in the users array references array objects state.users, not copies of the array.
It's a shallow copy, changing values, and changes state.users - lexus.Denesik commented on March 20th 20 at 12:33
@Erica10, good for you handles should make a copy of the report, but you can like I do. The link has changed, it follows that the object has changed and react on it. If you have a list of something, then you have two choices, you can leave the data as is in memory, or copy them to a new area. But to change your saw, you must return the new state, this is what you return from reducer at the change, and not data that you're manipulating.
https://redux.js.org/basics/reducers - janiya.Brekke commented on March 20th 20 at 12:36
@luther_Keeling16, we need to use a third party library for deep copying? Object.assign as I understand, too does only a shallow copy. - lexus.Denesik commented on March 20th 20 at 12:39
@Erica10, https://redux.js.org/basics/reducers - janiya.Brekke commented on March 20th 20 at 12:42
@luther_Keeling16, well understood,
Because we want to update a specific item in the array without resorting to mutations, we have to create a new array with the same items except the item at the index. If you find yourself often writing such operations, it's a good idea to use a helper like immutability-helper, updeep, or even a library like Immutable that has native support for deep updates


in General, entry const copyObj = [...state.obj] channel. - lexus.Denesik commented on March 20th 20 at 12:45
@luther_Keeling16,
If you have a list of something, then you have two choices, you can leave the data as is in memory, or copy them to a new area. But to change your saw, you must return the new state, this is what you return from reducer at the change, and not data that you're manipulating


So I did, returning a new object. Explain to me plz what the difference is: 1)take an array of state, change it, make a new object with this array and return, and 2)take an array of state, doing the sort of copy that does not actually copy and alter it, and also changes the array in the state, and repeat actions from point 1. - lexus.Denesik commented on March 20th 20 at 12:48
@luther_Keeling16, https://codesandbox.io/s/l92ko2o5yz what immutability is it? - lexus.Denesik commented on March 20th 20 at 12:51

Find more questions by tags JavaScriptReactRedux