Как правильно связывать react и redux?

Question

[kova1ev]

Здравствуйте, суть вопроса вот в чем.

При использовании редакса у меня возникает такой момент. Например, есть простой редьюсер:

const initialStateUser = {
    user: {}
};

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

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

И в компоненте привязываем:

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

В итоге, чтобы получить какое-нибудь свойство, к примеру с именем name, из объекта user, приходится писать вот такую конструкцию:
this.props.user.user.name
потому что у нас объект из userReducer заворачивается в еще один объект в rootReducer. Можно конечно давать разные имена, но что то мне кажется, что я делаю что-то не так. Объясните, плз.

Answer 1

[profesor08]

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

Либо

const initialStateUser = {
    name: "Вася"
};

Comments

[kova1ev]

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

Не могу понять в чем дело, но когда я так сделал этот компонент перестал видеть изменения в сторе. То есть другой компонент меняет данные, а этот не обновляется.

const initialStateUser = {
    name: "Вася"
};

на самом деле у меня там много юзеров, стейт такого вида:

const initialStateUser = {
    users: []
}

не будешь же под каждого юзера редьюсер писать

[profesor08]

kova1ev, значит уже у тебя там оказался массив юзеров, а еще через ответ там будет еще что-то, а потом еще и еще.

Организуй рабочий пример на https://codesandbox.io

[kova1ev]

profesor08, хорошо, пишу

[kova1ev]

profesor08, вот пример

https://codesandbox.io/s/w7q3xjm697

если переправить в компоненте User так, как вы выше писали, перестает работать

[profesor08]

kova1ev, так ты не понимаешь как работает состояние в реакте. Тебе нельзя его изменять, а ты берешь и меняешь. Тебе надо создать новый объект состояния и вернуть его, тогда и будут изменения.

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

[kova1ev]

profesor08, так я из редьюсера возвращаю новый объект, беру старый стейт, меняю его и конструирую новый, потом возвращаю

[kova1ev]

profesor08, но я понял в чем суть, я возвращал
return {...state, users: state.users}
а нужно
return {...state, users}

но я этой записи понять не могу. Я думал что возвращаемый объект должен быть такой же структуры, а получается был {user: [......]}, а стал {[........]}

[kova1ev]

profesor08, и еще непонятно, почему один вариант работает, а второй нет, ведь получается они оба должны быть нерабочими

[profesor08]

kova1ev, ты изменял текущее состояние, и возвращал новое, поэтому и работало, но выстрел в ногу не заставил себя долго ждать. Тебе надо было сделать копию объекта users, поработать над ней и вернуть в новом state.

return {...state, users} это говорит - создай мне объект, скопируй туда все из state и добавь новое поле users и замени старое, если было. Это равносильно:
return {...state, users: users}
return Object.assign({}, state, {users: users});

[kova1ev]

profesor08, не понимаю.

Ведь в users просто массив объектов. Откуда ключ берется?

я думал что
{...state, users}
это равносильно
{users:[], [.......]}
не могу уловить, как массив объектов users превращается в объект {users: [....]}
и все таки Object.assign это не тоже самое что в литералах объект конструировать

[profesor08]

kova1ev,
{users} равносильно {users: users}, это короткая запись.

[...users] это копирование элементов массива в другой массив.

Это базовые вещи, к реакту не относятся. Тебе надо их освоить. Перечитай статьи, перерешай задачки.

[kova1ev]

profesor08, понял, этого преобразования я действительно не знал, поэтому не мог понять, спасибо за помощь!

[kova1ev]

profesor08, по вашему совету решил подучить базовые вещи и выяснил что ваш код const users = [...state.users]; не делает копии стейта, следовательно, дальше так же меняется сам стейт, так что суть, видимо не в том, стейт или копию нужно изменять, а в том, как конструировать возвращаемый объект.

https://codesandbox.io/s/o5p26qwx5y

[profesor08]

kova1ev, эта строчка делает копию массива users.

[kova1ev]

profesor08, в массиве users объекты, это работало бы если бы там были примитивные значения. То есть там так же ссылки на объекты в стейте.

[profesor08]

kova1ev, ссылка на объект меняется

[kova1ev]

profesor08, ссылки меняется, объекты остаются те же. После строчки const users = [...state.users]; в массиве users ссылки на объекты массива state.users, а не копия этого массива.
Это поверхностная копия, меняя в ней значения, так же меняется и state.users

[profesor08]

kova1ev, по хорошему ты ручками должен сделать копию стейта, но можно и так как я. Ссылка изменилась, из этого следует что объект изменился и реакт на это реагирует. Если у тебя есть список чего-то, то у тебя есть два пути, ты можешь оставить данные как есть в памяти, либо скопировать их в новую область. Но чтоб твое изменение увидели, ты должен вернуть новое состояние, это то, что ты возвращаешь из редюсера при изменениях, а не данные, которыми ты манипулируешь.
https://redux.js.org/basics/reducers

[kova1ev]

profesor08, получается нужно юзать сторонние библиотеки для глубокого копирования? Object.assign как я понял, тоже делает только поверхностную копию.

[profesor08]

kova1ev, https://redux.js.org/basics/reducers

[kova1ev]

profesor08, ну понятно,

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

в общем, запись const copyObj = [...state.obj] не канает.

[kova1ev]

profesor08,

Если у тебя есть список чего-то, то у тебя есть два пути, ты можешь оставить данные как есть в памяти, либо скопировать их в новую область. Но чтоб твое изменение увидели, ты должен вернуть новое состояние, это то, что ты возвращаешь из редюсера при изменениях, а не данные, которыми ты манипулируешь

Так я так и делал, возвращал новый объект. Объясните мне, плз, в чем разница: 1)берем массив из стейта, изменяем его, делаем новый объект с этим массивом и возвращаем, и 2)берем массив из стейта, делаем какбы копию, которая на самом деле не копия и изменяя ее, также меняется массив в стейте, и повторяем действия из пункта 1.

[kova1ev]

profesor08, https://codesandbox.io/s/l92ko2o5yz , о какой иммутабельности идет речь?