1

Только начал изучать 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;
  }
}

1 ответ 1

2

В вашем редьюсере profileReducer.js ключ называется user

В вашем коде profile.js ключ который вы берете из state называется profile

Измените в файле profile.js:

const mapStateToProps = state => ({
    profile: state.user
});

P.S: в коде

componentDidMount() {
    this.props.getProfile();
    console.log(this.props.profile);
}

В console.log у вас будет null, так как this.props.getProfile() это асинхронная функция

Ваш ответ

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

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