我正在使用altjs构建一个React应用程序作为我的Flux实现。当我尝试从前端创建/删除项目时,无论我作为参数传递给创建/删除功能,它总是最终通过整个状态。
例如:我试图删除id = 1的项目。我单击该项目上的删除并将id只传递给组件中的删除功能。该函数再次调用删除服务传递id。一旦到达商店层,它就具有组件的整个状态,而不仅仅是传递的id。
我仍然对React / Flux还不熟悉,也不确定我做错了什么或为什么会这样。
主要组件删除功能:
deleteItem = (id) => {
console.log(id) //logs out 56b36c34ad9c927508c9d14f
QuestionStore.deleteQuestion(id);
}
此时,id仍然只是id。
QuestionStore:
import alt from '../core/alt';
import QuestionActions from '../actions/QuestionActions';
import QuestionSource from '../sources/QuestionSource';
class QuestionStore {
constructor() {
this.bindActions(QuestionActions);
this.exportAsync(QuestionSource);
this.loaded = false;
this.modalIsOpen = false;
this.data = [];
this.question = {
"text": '',
"tag": [],
"answer": [],
"company": [],
"createdAt": ''
};
this.error = null;
this.questionAdded = null;
this.questionDeleted = null;
}
onGetQuestions(data) {
if (data === false) {
this.onFailed();
} else {
this.data = data;
this.loaded = true;
}
}
onCreateQuestion(response) {
if (response === false) {
this.onFailed();
} else {
this.questionAdded = response;
}
}
onDeleteQuestion(response) {
if (response === false) {
this.onFailed();
} else {
this.questionDeleted = response;
}
}
onFailed(err) {
this.loaded = true;
this.error = "Data unavailable";
}
}
export default alt.createStore(QuestionStore, 'QuestionStore');
问题来源:
import Api from '../services/QuestionApi';
import QuestionActions from '../actions/QuestionActions';
let QuestionSource = {
fetchData() {
return {
async remote(state) {
return Api.getQuestions()
},
success: QuestionActions.getQuestions
}
},
createQuestion(question) {
return {
async remote(question) {
return Api.createQuestion(question)
},
success: QuestionActions.createQuestion
}
},
deleteQuestion(id) {
//id here is an object of the entire state of QuestionStore
return {
async remote(id) {
return Api.deleteQuestion(id)
},
success: QuestionActions.deleteQuestion
}
}
};
export default QuestionSource;
一旦达到这一点,id就是组件的整个状态,即使只传递了id。
答案 0 :(得分:2)
绑定到操作的第一个参数是存储的状态(exportAsync
调用的结果的一部分。所以所有参数都向右移动一个,并且第一个参数调用函数反过来成为第二个参数。见下面的代码示例:
deleteQuestion(state, id) {
//state here is an object of the entire state of QuestionStore
//id will be the first argument you provide to the function.
return {
async remote(id) {
return Api.deleteQuestion(id)
},
success: QuestionActions.deleteQuestion
}
}