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 не было

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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