3

ここで React と Redux についての概念が欠けていると思います。redux に保存されているオブジェクトを操作しようとしていますが、問題が発生しています。

REDUX: データベースからすべてのアイテムを取得するアクション fetchItems があります。このアクションは正常に機能します。

REACT: componentDidMount で fetchItems を呼び出すコンテナー UserProfile があります。

class UserProfile extends Component {

  componentWillMount() {
    console.log('------------ USER PROFILE -------------------');
  }

  componentDidMount() {
    console.log('[ComponentDidMount]: Items: ', this.props.items);
    this.props.fetchItems();
  }

  render() {
    let profile = null;
    console.log('[Render]: Items: ', this.props.items);

    return <Auxillary>{profile}</Auxillary>;
  }
}

const mapStateToProps = state => {
  return {
    items: state.items.items
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchItems: () => dispatch(actions.fetchItems())
  };
};

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

私が見ている問題は、this.props.items が常に null であることです (fetchItems が成功した場合でも)。アイテムが redux ストアに格納されていることを検出できる唯一の方法は、componentWillRecieveProps(nextProps) を使用する場合です。ここでは、nextProps のアイテムが正常に表示されます。ただし、 componentWillReceiveProps を使用するのは「面倒」すぎるかもしれません。私が求めているのは、反応で還元状態の更新を処理する標準的な方法は何ですか?

アシール

4

4 に答える 4