Реагировать операции CRUD всегда с использованием состояния

Question

Я создаю приложение React, используя altjs в качестве моей реализации Flux. Когда я пытаюсь создать/удалить элемент из переднего конца, независимо от того, что я передаю в качестве параметра функции create/delete, он всегда заканчивается передачей всего состояния.

Например: Я пытаюсь удалить элемент с id = 1. Я нажимаю delete на этом элементе и передаю только идентификатор функции удаления в компоненте. Эта функция вызывает службу удаления, снова передающую идентификатор. Как только это дойдет до уровня хранилища, оно имеет все состояние компонента, а не только идентификатор, который передается.

Я до сих пор довольно новичок в React/Flux и не уверен, что я делаю неправильно или почему это происходит.

Основной компонент Функция удаления:

deleteItem = (id) => { 
     console.log(id) //logs out 56b36c34ad9c927508c9d14f 
     QuestionStore.deleteQuestion(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'); 

QuestionSource:

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; 

После того, как она попадает этот момент, идентификатор теперь все состояние компонента, даже если только идентификатор передается.

Answer 1

Первым параметром, связанным с действием, является состояние хранилища (часть результата вызова 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 
    } 
} 

Documentation from alt.js about handling async operations.