0

Flux 実装として altjs を使用して React アプリを構築しています。フロントエンドからアイテムを作成/削除しようとすると、作成/削除関数にパラメーターとして何を渡しても、常に状態全体を渡すことになります。

例: ID=1 のアイテムを削除しようとしています。そのアイテムの [削除] をクリックし、ID だけをコンポーネントの削除関数に渡します。その関数は、ID を渡して削除サービスを再度呼び出します。それが store レイヤーに到達すると、渡された 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 はコンポーネントの全体的な状態になります。

4

1 に答える 1

2

アクションにバインドされている最初のパラメーターは、ストアの状態 (exportAsync呼び出しの結果の一部) です。したがって、すべてのパラメーターが 1 つ右にシフトし、関数を呼び出す最初のパラメーターが 2 番目のパラメーターになります。 を参照してください。以下のコード例:

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
    }
}

非同期操作の処理に関する alt.js のドキュメント。

于 2016-03-04T17:18:27.403 に答える