使用ReactJS + Redux时是否需要componentWillReceiveProps和replaceProps? [英] Do I need componentWillReceiveProps and replaceProps when using ReactJS + Redux?

问题描述

我正在与响应一起学习redux，并开发了第一个应用程序来从Destiny捕获一些信息并呈现给用户.该应用程序具有一个选择框，用户可以在其中选择许多活动之一，然后我保存该活动以通过ActivityComponent上的API进行检查，问题是，我这样做了(使用redux获取活动标识符并保存在商店中)然后稍后我必须在ActivityComponent上进行检索，但是以某种方式我必须实现这一点:

i'm learning redux along side with react and did a first app to catch a few infos from Destiny and present for the user. The app has a select box where the user can choose one of the many activities and I save that activity to check with the API on the ActivityComponent, the problem is, I do that (get the activity identifier with redux and save on a store) then later I have to retrieve on the ActivityComponent but somehow I had to implement this:

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/命运每周

Well here's my repository on github if anyone could help me: https://github.com/persocon/destiny-weekly

推荐答案

因此，快速的回答是否"，没有必要.为什么 ?好吧，您还没有真正使用redux.如果您查看该ajax调用是在替换道具getAjax中做的，我已经在您的代码库中进行了检查，看到您在那里收到请求后正在组件中调用setState.

So the quick answer is no, it's not necessary. Why ? Well, you're not really using redux yet. If you look at that ajax call your are doing in replace props, getAjax, I inspected that in your codebase, and see you're calling setState in the component after receiving a request there.

使用redux时，您宁愿使用动作和减速器.接收到该数据后，将处理该操作，调用api，并使用化简器在redux存储"中设置状态.

With redux, you would rather use an action and reducer. The action would be handled, calling the api, and setting the state in the redux "store" with a reducer after receiving this data.

好吧，一个完整的例子如下:首先添加 redux-thunk redux-thunk ，它肯定会帮助您继续前进，请务必仔细阅读自述文件中的示例，以更好地了解方式和原因.

Ok so a full blown example would be something like the following, just first add in redux-thunk, it will definitely help you out going forward, be sure to go read through the example on the README to get a better idea of the how and why.

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

因此，乍一看可能有点令人生畏，但是经过一两回合后，这样做会感觉更自然，而不是在组件中.

So it might look a bit intimidating at first, but after a go or two, it will feel more natural doing things this way, instead of in the component.

这篇关于使用ReactJS + Redux时是否需要componentWillReceiveProps和replaceProps?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！