How can I clear state in React.js?

Question

I think that I probably do not understand how React and Reflux work.

If I set the state of an object (“project”) because it displays on the screen (with its existing properties), how can I use the same state (and storage) to create a new project?

This is the code from my design view:

componentWillMount: function () {

    // We need to get the project based on projectID.
    var projectID = this.props.params.projectID;

    if (projectID) {
        ProjectActions.getProject(projectID);
    }
},

And here is the code from my project repository:

data: {},

listenables: ProjectActions,

getInitialState: function() {
    return this.data;
},

onGetProject: function (projectID) {

    // Get the project based on projectID.
    $.ajax({
        type: 'GET',
        url: '/api/projects/getProject/' + projectID
    }).done(function(response){
        ProjectStore.getProjectSuccessful(response);
    }).error(function(error){
        alert('GET projects failed.');
    });

},

getProjectSuccessful: function(response) {
    for (var prop in response) {
        if (response.hasOwnProperty(prop)) {
            this.data[prop] = response[prop];
        }
    }
    this.trigger(this.data);
},

Then, let's say I click "new project", I use this code:

mixins: [Reflux.connect(ProjectStore), Router.Navigation],

getInitialState: function () {
    return {
        // Project properties:
        format: '',
        title: '',
        productionCompany: ''

    };
},

, , "getInitialState" , , . , , , ( prop , ).

"getInitialState", :

Uncaught Error: Invariant Violation: mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `format`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.

"NewProjectStore", create? , , , ..

- ?

Answer 1

Reflux.connect, getInitialState . . Reflux.listenTo getInitialState .

1: getInitialState()

, , , . , Reflux.connect getInitialState. , getInitialState , .

2:

, , , . , . -. :

:

var ProjectActions = Reflux.createActions({
    getProject: {asyncResult: true}
});
ProjectActions.getProject.listen(function (projectID) {
    // Get the project based on projectID.
    $.ajax({
        type: 'GET',
        url: '/api/projects/getProject/' + projectID
    }).done(function(response){
        ProjectActions.getProject.completed(response);
    }).error(function(error){
        alert('GET projects failed.');
        ProjectActions.getProject.failed(error);
    });
});

var ProjectStore = Reflux.createStore({
    init: function () {
        // default project properties:
        this.data = {
            format: '',
            title: '',
            productionCompany: ''
        };
    },

    listenables: ProjectActions,

    getInitialState: function() {
        return this.data;
    },

    onGetProjectCompleted: function(response) {
        for (var prop in response) {
            if (response.hasOwnProperty(prop)) {
                this.data[prop] = response[prop];
            }
        }
        this.trigger(this.data);
    }
});