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.

Could you post your event binding on the element, and a console log from within the first `deleteItem` method in the main component? Also, normally one would execute an Action which will affect the store, not the other way around. — janpieter_z, Mar 03 '16 at 17:00
@janpieter_z I added more code. I know the action should be doing most of the work, however, I based this off an example I was following and this is how they had it set up. — erichardson30, Mar 03 '16 at 17:43
I don't see the actuall call to the QuestionSource.deleteQuestion. Are you sure it's from the store? Can you post the QuestionActions? I think you should call that one from your button click binding. — janpieter_z, Mar 04 '16 at 09:09
@janpieter_z `this.exportAsync(QuestionSource);` exposes the questionSource functions which contains the deleteQuestion function — erichardson30, Mar 04 '16 at 14:23
Ah I missed that one, sorry. What if you add another parameter in the `deleteQuestion` method? First one I'd call `state`, second one `id`. Then log the Id and I'm guessing you should see it have the correct id. — janpieter_z, Mar 04 '16 at 16:02
@janpieter_z thanks. Adding that second param worked. If you add an answer/explanation to the question I will mark it as correct. — erichardson30, Mar 04 '16 at 16:55

score 2 · Accepted Answer · answered Mar 04 '16 at 17:18

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.

React CRUD operations always using state

1 Answers1