1

Пишу приложение с использованием react-redux. В store хранится объект с атрибутами профиля пользователя.

Есть редуктор, который по умолчанию возвращает пустые атрибуты профиля (для не авторизованного пользователя) и может выполнять действия авторизации (изменение всех атрибутов объекта), или изменение какого то конкретного атрибута (если пользователь авторизован и хочет указать или изменить какую то информацию о себе в профиле):

    let initialState = {
    username:"",
    avatar:null,
    social_links: [],
    loginCompleted:false,
    about_me: null,
    birthdate: null,
    city: null,
    country: null,
    email: null,
    firstname: null,
    gender: null,
    lastname: null,
    patronymic: null,
    phone: null,
    photo: null,
};
const profileReducer = (state=initialState, action)=> {
    switch(action.type){
        case "CHANGE-FIRSTNAME":
            let newState = state;
            newState.firstname = action.value;
            return newState;
        case "CHANGE-ALL-PROFILE_ATTRIBUTES":
            return {...state, username:action.value.username, avatar:action.value.avatar, social_links:action.value.social_links, about_me:action.value.about_me, birthdate:action.value.birthdate, city:action.value.city};
        default: return state;
    }
};

export default profileReducer;

После авторизации username и avatar должны отобразиться на шапке сайте. Для передачи состояния я использую connect из react-redux:

import React, {Component} from 'react';
import emptyAvatar from './img/avatar.svg';
import './header__account-data.css';
import {connect} from "react-redux";

class AccountData extends Component {

    onToggleAutorizedMenu = (event) =>{
      event.preventDefault();
      let autorizedMenu = document.querySelector('.header__autrized-menu');
      autorizedMenu.style.display=="none"?autorizedMenu.style.display="block":autorizedMenu.style.display="none";
    };

    render() {
        let user = this.props.testStore;
        console.log(user);
        if(user.avatar!=null){
            return(
                <a href="#" className="account-data" onClick={this.onToggleAutorizedMenu}>
                    <img className="account-data__avatar" src={user.avatar} alt="avatar"></img>
                    <p className="account-data__user-name">{user.username}</p>
                </a>
            )
        }else{
            return(
                    <a href="#" className="account-data" onClick={this.onToggleAutorizedMenu}>
                        <img className="account-data__avatar" src={emptyAvatar} alt="avatar"/>
                        <p className="account-data__user-name">{user.username}</p>
                    </a>
                )
        }
    }
}

export default connect(
    state => ({
        testStore: Object.assign({},state)
    }),
    dispatch => ({})
)(AccountData);

Но после авторизации компонент AccountData шапки сайта не перерисовывается, хотя значения атрибутов профиля обновляются, я вижу это в консоли, проверяю в этом же компоненте. Судя по всему ссылка на объект store не изменилась и поэтому connect не видит изменения, но я не понимаю как это исправить

4
  • а зачем вообще Object.assign({},state) делать? можете объяснить? 3 сен 2020 в 17:18
  • @Август, изначально там было просто testStore: state, но из за того, что компонент не перерисовывался попробовал такой вариант, думал, что причина в том, что ссылка на объект не меняется 3 сен 2020 в 18:05
  • в любом случае, если state перерисовывается, то редьюсер работает отлично. скиньте код Вашего компонента вместе с тем как Вы подключаете его через connect 3 сен 2020 в 18:08
  • @Август, добавил код компонента в тело вопроса 3 сен 2020 в 18:16

1 ответ 1

0

Разобрался в причине. Connect возвращал testStore. Я посмотрел в консоли и в testStore был объект profileReducer, который содержал параметры профиля. Соответственно, когда я обращался к testStore.avatar/testStrore.username, я обращался к атрибутам, которых в testStore не было

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.