使用ReactJS+Redux时,我需要componentWillReceiveProps和replaceProps吗
Do I need componentWillReceiveProps and replaceProps when using ReactJS + Redux?
我正在学习redux和react,并制作了第一个应用程序来捕捉Destiny的一些信息并呈现给用户。该应用程序有一个选择框,用户可以在其中选择许多活动中的一个,我保存该活动以与ActivityComponent上的API检查,问题是,我这样做(用redux获取活动标识符并保存在商店中),然后我必须在ActivityCompinent上检索,但不知何故,我不得不实现这一点:
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
所以快速答案是否定的,没有必要。为什么?嗯,你还没有真正使用redux。如果您在replace props getAjax中查看您正在进行的ajax调用,我在您的代码库中检查了它,并看到您在收到请求后正在组件中调用setState。
对于redux,您更愿意使用动作和减速器。将处理该操作,调用api,并在接收到该数据后使用reducer在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)
}
})
}
}
所以一开始可能看起来有点吓人,但一两次之后,用这种方式做事会感觉更自然,而不是在组件中。
不需要替换道具,因为道具会自动更新。componentWillReceiveProps为您提供了一个机会,让您可以一窥这个生命周期中会发生什么。
注意:永远不要破坏this.props
,因为它在内部使用。
我建议将此.props与组件WillReceiveProps内的next.props进行比较,以查看所选"活动"是否已更改。如果是,那么启动ajax调用(我建议使用传递到组件中的redux操作)。
是的,我把评论搞砸了哈哈对不起,在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反应的。您应该使用redux方法。除非您必须使用反作用生命周期方法。
- 没有找到相关文章