Только начал изучать React-Redux. Пытаюсь разобраться почему в данном примере не обновляются пропсы в React, результатом после рендеринга остается объект из initialState. В Redux Devtools все отрабатывает нормально, объект приходит.
profile.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getProfile } from '../../actions/profileActions';
import PropTypes from 'prop-types';
class Profile extends Component {
componentDidMount() {
this.props.getProfile();
console.log(this.props.profile);
}
render() {
const {nickname, email, password} = this.props.profile;
return (
<div>
{nickname}
{email}
{password}
</div>
)
}
}
Profile.propTypes = {
getProfile: PropTypes.func.isRequired,
profile: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
profile: state.profile
});
export default connect(mapStateToProps, {getProfile})(Profile);
profileActions.js
import {GET_PROFILE, PROFILE_LOADING} from './types'
import axios from 'axios';
export const getProfile = () => dispatch => {
dispatch(setProfileLoading());
axios.get('/api/profile')
.then(res =>
dispatch({
type: GET_PROFILE,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_PROFILE,
payload: null
})
);
};
export const setProfileLoading = () => {
return {
type: PROFILE_LOADING
};
};
profileReducer.js
import { GET_PROFILE, PROFILE_LOADING } from '../actions/types'
const initialState = {
user: null,
loading: false
};
export default function(state = initialState, action) {
switch(action.type) {
case PROFILE_LOADING:
return {
...state,
loading: true
}
case GET_PROFILE:
return {
...state,
user: action.payload,
loading: false
};
default:
return state;
}
}