ここで 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 を使用するのは「面倒」すぎるかもしれません。私が求めているのは、反応で還元状態の更新を処理する標準的な方法は何ですか?
アシール