Передача нового состояния дочернему компоненту в React

Question

Я подключил компоненты Home с методом действия и успешно отправил редуктор.Кажется, что все работает нормально, я вижу, как данные API поступают в редуктор в консоли.

Проблема в том, что реакция не перерисовывается ProfileGroupsWidget .this.props.user всегда находится в {} в этом дочернем компоненте, я ожидал, что он будет {name: "John Doe"}

Вот userReducer , "GET_AUTH_USER_SUCCESS" взято из getAuthenticatedUser :

const initialState = {};

const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'GET_AUTH_USER_SUCCESS':
            console.log('Output:', action.user); // {name: "John Doe"}
            state = action.user
            return state;
        default:
            return state
    }
}

export {userReducer}

Дом - это мой Домашний компонент :

import React, { Component } from 'react';
import ProfileGroupsWidget from './Widgets/ProfileGroupsWidget.js'
import {connect} from 'react-redux'
import {userActions} from "../_actions/userActions";

class Home extends Component{

    constructor(props) {
        super(props);
        this.state = {
            user: this.props.user
        }
        this.props.getAuthenticatedUser();
    }

    render() {
        return (
            <ProfileGroupsWidget user={this.state.user}></ProfileGroupsWidget>
        )
    }

}

const mapStateToProps = state => {
    return state
}

function mapDispatchToProps(dispatch){
    return {
        getAuthenticatedUser : () => {dispatch(userActions.getAuthenticatedUser())}
    }
}

// Connect Home component props with store data:
export default connect(mapStateToProps, mapDispatchToProps)(Home);

Answer 1

Почему вы передаете props.user в ваш штат? Это должно быть ненужным в зависимости от вашего текущего кода. При этом было бы лучше назначить this.props.user непосредственно в ProfileGroupsWidget. Это если ваш редукс работает и правильно подключен к вашему компоненту.

Еще одна вещь ( Вызов действия из конструктора вместо метода жизненного цикла ), лучше вызывать сетевые запросы или действия внутри componentDidMount, а не в конструкторе:

componentDidMount() {
  this.props.getAuthenticatedUser();
}

Если у вас все правильно, вы должны увидеть несколько console.logs this.props.user, если вы войдете в систему render ():

render() {
  console.log(this.props.user);
  /*
    should be called at least twice,
    the last one containing the data {name: "John Doe"}
  */

  return (
    <ProfileGroupsWidget user={this.props.user}></ProfileGroupsWidget>
  )
  ...

Answer 2

В вашем коде this.props.user всегда будет неопределенным, потому что вы не устанавливаете значение для него в редукторе. Мы должны установить значение следующим образом:

Отредактированный код:

const initialState = {
 user: {}
};

const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'GET_AUTH_USER_SUCCESS':
           return { ...state, user: action.user };
        default:
            return state;
    }
}

export { userReducer }

Отредактированный код: В домашнем компоненте: (в mapStateToProps я сохранил userReducer в качестве идентификатора, пожалуйста, измените его на любое имя редуктора, которое вы использовали в rootReducer).

Мы также можем полностью удалить код конструктора, если хотите, и переместить диспетчер действий в componentWillMount().

import React, { Component } from 'react';
import ProfileGroupsWidget from './Widgets/ProfileGroupsWidget.js'
import { connect } from 'react-redux'
import { userActions } from "../_actions/userActions";

class Home extends Component{
    constructor(props) {
        super(props);
        this.state = {
          user: props.user
        }
        props.getAuthenticatedUser();
    }

    render() {
        return (
            <ProfileGroupsWidget user={this.props.user}></ProfileGroupsWidget>
        )
    }
}

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

const mapDispatchToProps = (dispatch) => ({
  getAuthenticatedUser: () => dispatch(userActions.getAuthenticatedUser())
});

// Connect Home component props with store data:
export default connect(mapStateToProps, mapDispatchToProps)(Home);