Question

我正在学习redux与反应，并做了第一个应用程序从Destiny捕获一些信息并为用户呈现。该应用程序有一个选择框，用户可以选择其中一个活动，我保存该活动以检查ActivityComponent上的API，问题是，我这样做（使用redux获取活动标识符并保存在商店中）然后我必须在ActivityComponent上检索但不知何故我必须实现这个：

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上的我的存储库：https://github.com/persocon/destiny-weekly

Answer 1

不应该对replaceProps有任何需要，因为道具会自动更新。 componentWillReceiveProps让您有机会了解此生命周期中的内容。

注意：您不应该破坏this.props内部使用的内容。

我建议将this.props与componentWillReceiveProps中的nextProps进行比较，以查看所选的Activity是否已更改。如果是，则触发ajax调用（我建议使用传递给组件的redux操作）。

Answer 2

所以快速回答是否定的，没有必要。为什么？好吧，你还没有真正使用redux。如果你看看你正在做的ajax调用替换道具，getAjax，我在你的代码库中检查过，并且在收到请求之后看到你在组件中调用了setState。

使用redux，您宁愿使用动作和减速器。操作将被处理，调用api，并在收到此数据后使用reducer在redux“store”中设置状态。

好吧所以一个完整的例子如下所示，只需先添加redux-thunk，它肯定会帮助你向前发展，一定要仔细阅读自述文件中的示例以获得更好的结果关于如何以及为什么的想法。

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)
     }
   })
 }
}

所以一开始看起来有些令人生畏，但是经过一两次之后，用这种方式做事情会更自然，而不是在组件中。

Answer 3

是的，我搞砸了评论，哈哈抱歉，在SelectContainer.jsx现在，我正在这样做，以便在选择更改后检索活动json：

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

<强>更新

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反应的方法的生命周期。你应该使用redux方法。除非你必须使用反应生命周期方法。

使用ReactJS + Redux时是否需要componentWillReceiveProps和replaceProps？

4 个答案: