Пишу приложение с использованием 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 не видит изменения, но я не понимаю как это исправить
Object.assign({},state)
делать? можете объяснить?state
перерисовывается, то редьюсер работает отлично. скиньте код Вашего компонента вместе с тем как Вы подключаете его черезconnect