React CRUD operations always using state

Question

I am building a React app using altjs as my Flux implementation. When I try to create/delete an item from the front end, no matter what I pass as a parameter to the create/delete function, it always ends up as passing the entire state.

For example : I'm trying to delete an item with id=1. I click delete on that item and pass just the id to the delete function in the component. That function calls the delete service again passing the id. Once that gets to the store layer, it has the entire state of the component and not just the id that is passed.

I'm still fairly new to React/Flux and not sure what I'm doing wrong or why this is happening.

Main component delete function :

deleteItem = (id) => {
        console.log(id) //logs out 56b36c34ad9c927508c9d14f
        QuestionStore.deleteQuestion(id);
    }

At this point id is still just the 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;

Once it hits this point, id is now the entire state of the component even though only the id is passed.

Answer 1

The first parameter that is bound to the action is the state of the store (part of the result of the exportAsync call. So all parameters shift one to the right, and the first parameter you call the function with in turn becomes the second parameter. See below code example:

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.