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

IT技术 javascript reactjs webpack redux babeljs
2021-05-21 04:42:32

我正在学习 redux 和 react,并做了第一个应用程序来从命运中获取一些信息并呈现给用户。该应用程序有一个选择框,用户可以在其中选择众多活动之一,我保存该活动以检查 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

4个回答

所以快速回答是否定的,没有必要。为什么 ?好吧,您还没有真正使用 redux。如果您查看您在替换props getAjax 中所做的 ajax 调用,我在您的代码库中检查了它,并看到您在那里收到请求后在组件中调用 setState。

使用 redux,你更愿意使用 action 和 reducer。该操作将被处理,调用 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)
     }
   })
 }
}

所以一开始它可能看起来有点吓人,但经过一两次之后,以这种方式做事会感觉更自然,而不是在组件中。

不需要 replaceProps,因为props会自动更新。componentWillReceiveProps 让您有机会了解此生命周期中将要发生的事情。

注意:您永远不应该破坏,this.props因为它是内部使用的。

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

是的,我搞砸了评论 haha​​ 抱歉,在 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);

一般而言,与 redux react的方法的生命周期。你应该使用 redux 方法。除非您必须在react生命周期方法中使用。