ReactJS + Reduxを使用する場合、componentWillReceivePropsとreplacePropsが必要ですか？

Question

私は反応の面で還元を学んでいて、Destinyからいくつかの情報をキャッチするための最初のアプリを実行し、ユーザーのために提示しました。このアプリケーションには、多くのアクティビティの1つを選択できる選択ボックスがあり、そのアクティビティを保存してActivityComponentのAPIをチェックすると、問題が発生します（アクティビティ識別子をreduxで取得してストアに保存します）その後、私はActivityComponentに取得するために持っていますが、どういうわけか、私はこれを実装する必要がありました：https://github.com/persocon/destiny-weekly

Answer 1

したがって、迅速な回答はいいえではありません。どうして ？まあ、あなたはまだ、レキシックスを使っていません。あなたが、getAjaxを置き換える小道具でやっているそのajax呼び出しを見ると、私はあなたのコードベースでそれを調べ、要求を受け取った後でコンポーネント内でsetStateを呼び出しているのを見ます。

reduxでは、代わりにアクションとレデューサーを使用します。アクションは、apiを呼び出して、このデータを受け取った後、レデューサーでreduxの "ストア"の状態をレデューサーで設定して処理されます。

これで完全な例は、次のようなものになります。redux-thunkを最初に追加してください。これは間違いなく今後の進め方に役立ちます。READMEの例を読んで、方法と理由。

function startLoading() { 
    return { 
    type: 'LOADING_STARTED', 
    isLoading: true 
    } 
} 

function doneLoading(){ 
    return { 
    type: 'LOADING_ENDED', 
    isLoading: false 
    } 
} 

function setActivity(result) { 
    let lastGist = result[0]; 
    let activity = { 
    identifier: result.display.identifier, 
    title: (result.display.hasOwnProperty('advisorTypeCategory'))? result.display.advisorTypeCategory : '', 
    name: (result.hasOwnProperty('details') && result.details.hasOwnProperty('activityName')) ? result.details.activityName : '', 
    desc: (result.hasOwnProperty('details') && result.details.hasOwnProperty('activityDescription')) ? result.details.activityDescription : '', 
    backgroundImg: (result.display.hasOwnProperty('image')) ? 'http://bungie.net' + result.display.image : '', 
    modifiers: (result.hasOwnProperty('extended') && result.extended.hasOwnProperty('skullCategories')) ? result.extended.skullCategories : [], 
    bosses: (result.hasOwnProperty('bosses')) ? result.bosses : [], 
    items: (result.hasOwnProperty('items') && result.display.identifier == "xur") ? result.items : [], 
    bounties: (result.hasOwnProperty('bounties')) ? result.bounties : [] 
    } 
    return { 
    type: 'SET_ACTIVITY', 
    activity: activity 
    } 
} 

export function findActivity(activity_id) { 
return dispatch => { 
    dispatch(startLoading()) 
    $.get(activity_id, (result)=>{ 
    dispatch(doneLoading()) 
    if(response.status == 200){ 
     dispatch(setActivity(response.json)) 
    }else { 
     dispatch(errorHere) 
    } 
    }) 
} 
} 

は、だから、最初は威圧的なビットに見えるかもしれませんが、外出先または2の後、それは代わりのコンポーネントで、このようなことをやって、より自然な感じになります。

Answer 2

replacePropsの必要があるべきではありません。誰も私を助けることができれば、ここまあ

componentWillReceiveProps(nextProps) { 
    this.props = {}; 
    this.replaceProps(nextProps, cb => this.getAjax()); 
} 

replaceProps(props, callback){ 
    this.props = Object.assign({}, this.props, props); 
    this.setState(initialState); 
    callback(); 
} 

をgithubの上の私のリポジトリです小道具が自動的に更新されるので、 componentWillReceivePropsは、このライフサイクルに来るものを覗いてみるチャンスです。

注：内部で使用されているように、this.propsを決して壊さないでください。

選択されたアクティビティが変更されているかどうかを確認するために、this.propsとcomponentPreviousPropsのnextPropsを比較することをお勧めします。もしそうなら、ajax呼び出しを起動します（コンポーネントに渡されたreduceアクションを使用することをお勧めします）。

Answer 3

はええ、私は申し訳ありませんが、SelectContainer.jsxに今私が選択し、変更後の活動のJSONを取得することをやってる（笑）コメントめちゃくちゃ：

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSelectChange: (activity) =>{ 
      dispatch(changeApiUrl(activity)); 
      dispatch(findActivity(activity)); 
     } 
    } 
} 

UPDATEを

import { connect } from 'react-redux'; 
import { changeApiUrl, findActivity } from '../actions/index.jsx'; 
import ActivityComponent from '../components/ActivityComponent.jsx'; 

const mapStateToProps = (state) => { 
    return state.activity; 
} 

export class ActivityContainer extends ActivityComponent { 
    componentDidMount() { 
     const { dispatch, identifier } = this.props; 
     dispatch(findActivity(identifier)); 
    } 
} 

export default connect(mapStateToProps)(ActivityContainer); 

Answer 4

一般的に還元剤と反応する方法のライフサイクルについて言えば、あなたはreduxメソッドを使うべきです。反応ライフサイクルメソッドで使用する必要がある場合を除きます。