react componentWillMountでのデータ設定の使い方は？

Question

コンポーネントがレンダリングされる前に初期データを取得したい。
したがって、私はcomponentWillMountで更新アクションを状態表示しようとします。
componentDidMountでコンソールの結果を確認すると状態は変わりますが、結果は空白です。

imageUpload.js

export const IMAGE_UPLOAD = 'IMAGE_UPLOAD'; 
export function imageUpload(photo) { 
    return { 
    type: IMAGE_UPLOAD, 
    photo 
    } 
} 

Reducers.js

import { IMAGE_UPLOAD } from './actions/imageUpload'; 

export default function imageUpload(state = {photo: ''}, action) { 
    switch(action.type) { 
    case IMAGE_UPLOAD: 
     return { 
     ...state, 
     photo: action.photo 
     } 
    default: 
     return state 
    } 
} 

App.js私は何sholud

import photo from './data/photo.json' // photo type: json 
import imageUpload from './actions/imageUpload' 

componentWillMount() { 
    Storage.prototype.setObject = (key, value) => { 
    this.setItem(key, JSON.stringify(value)) 
    } 
    Storage.prototype.getObject = (key) => { 
    return this.getItem(key) && JSON.parse(this.getItem(key)) 
    } 
    const photoData = localStorage.getObject('photos'); 
    if(photoData) // data in localStorage 
    imageUpload(photoData) // state setting localStorage data 
    else // data not in localStorage 
    imageUpload(photo) // state setting photo json data 
} 

componentDidMount() { 
    console.log(this.props.photo); // result: blank (I want result: any value) 
} 

class App extends React.Component { 
    // ... 
} 

const mapStateToProps = (state) => ({ 
    photo: state.imageUpload.photos 
}) 

const mapDispatchToProps = (dispatch) =>({ 
    imageUpload: bindActionCreators(imageUpload, dispatch) 
}) 

export default connect(mapStateToProps, mapDispatchToProps)(App) 

？
ありがとうございます。

Answer 1

Redux状態の更新は非同期です。つまり、には、 Redux状態が更新されるまでの時間がかかります。 componentDidMountのデータが表示されない理由は、メソッドが呼び出されるまでにredux asyncアクションがまだ完了していないためです。

componentWillRecievePropsのデータをお試しください。このメソッドは、非同期アクションが完了したときにデータとともに呼び出されます。だから、

：

componentWillRecieveProps(nextProps) { 
    console.log(nextProps.photo); 
}