react componentWillReceiveProps Datenreplikation

Question

Ich bekomme einige Schwierigkeiten, einige Daten zu bekommen. Bei componentWillReceiveProps Ich muss ein Objekt widgets erhalten, aber ich erkannte, dass das Objekt widgets enthält ein anderes Objekt widgets und ich muss darauf zugreifen, indem widgets.widgets.

Erwarteter Wert: widgets: { value1: 10, value2: 20, value3: 30 }

Istwert: widgets: { widgets: { value1: 10, value2: 20, value3: 30 } }

Ich weiß, dass seine mögliche, so etwas zu tun (aber ich denke, das ist hässlich):

componentWillReceiveProps({ widgets }) { 
    if (widgets !== this.props.widgets) { 
    this.setState({ widgets: widgets.widgets }); 
    } 
} 

Jede Hilfe ist zu erkennen, !

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { connect } from 'react-redux'; 
import * as widgetsActions from '../js/actions/widgetsActions'; 
import Dashboard from './dashboard/Dashboard'; 
import style from './App.scss'; 

class App extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     widgets: this.props.widgets, 
    }; 
    } 

    componentWillMount() { 
    if (JSON.stringify(this.state.widgets) === JSON.stringify({})) { 
     this.props.loadWidgets(); 
    } 
    } 

    componentWillReceiveProps({ widgets }) { 
    if (widgets !== this.props.widgets) { 
     this.setState({ widgets }); 
    } 
    } 

    render() { 
    return (
     <div className={style.app}> 
     {(JSON.stringify(this.state.widgets) !== JSON.stringify({})) && 
     <div> 
      <Dashboard widgets={this.state.widgets} /> 
     </div> 
     } 
    </div> 
    ); 
    } 
} 

App.propTypes = { 
    loadWidgets: PropTypes.func.isRequired, 
    widgets: PropTypes.shape({ 
    value1: PropTypes.number, 
    value2: PropTypes.number, 
    value3: PropTypes.number, 
    }).isRequired, 
}; 

const mapStateToProps = state => (
    { 
    widgets: state.widgets, 
    } 
); 

const mapDispatchToProps = dispatch => (
    { 
    loadWidgets:() => dispatch(widgetsActions.loadWidgets()), 
    } 
); 

export default connect(mapStateToProps, mapDispatchToProps)(App); 

Answer 1

Ich gehe davon aus, dass es ein Problem mit Ihrem Reduzierer Setup ist. Der Abschnitt Structuring Reducers - Using combineReducers der Redux-Dokumentation beschreibt einige Gründe, warum dies passieren kann, und es ist in der Regel ein Missverständnis, wie combineReducers und Slice-Reduzierer zusammenarbeiten, um die Zustandsstruktur zu definieren.