Макс Мачез, вам не надо обращаться к
store напрямую в компоненте, если вы используете
react-redux.
Вы не должны мапить весь стор, как это делаете в примере в комментарии, мапьте только данные необходимые компоненту:
const mapStateToProps = state => ({
userData: state.userData,
});
по-хорошему, для получения части объекта состояния, надо использовать
selector pattern, отличная его реализация
reselect:
import { createSelector } from 'reselect';
export const userDataSeleror = state => state.userData;
export const userSelector = state => createSelector(
userDataSelector,
userData => userData.user,
);
export const isUserDataLoadingSelector = state => createSelector(
userDataSelector,
userData => userData.isLoading,
);
export const isUserDataErrorSelector = state => createSelector(
userDataSelector,
userData => userData.isError,
);
тогда контейнер для компонента будет примерно такой:
import { fetchUserData } from './somePlace';
import Profile from './Profile';
import {
userSelector,
isUserDataLoadingSelector,
isUserDataErrorSelector,
} from './selectors';
const mapStateToProps = state => ({
user: userSelector(state),
isLoading: isUserDataLoadingSelector(state),
isError: isUserDataErrorSelector(state),
});
const mapDispatchToProps = {
fetchUserData,
};
export default connect(mapStateToProps, mapDispatchToProps)(Profile);
Компонент внутри вообще ничего не должен знать про
redux, он лишь получает набор обязательных свойств и использует, а откуда они приходят ему не важно:
class Profile extends Component {
componentDidMount() {
this.props.fetchUserData();
}
render() {
const { user, isLoading, isError } = this.props;
return (
...
);
}
}
Все, что вы передаете посредством декоратора
connect в компонент, доступно в последнем в его свойствах (
this.props), аргументы поэтому так и называются
mapStateToProps и
mapDispatchToProps. Все
actionCreators переданные объектом в
mapDispatchToProps оборачиваются в
dispatch, внутренним вызовом
bindActionCreators.
