Page Comparison

...

It that case the component should be connected to an store, and also, we will need to actions to open and close the modal.

The store should contain, at least, the initial values for openModal and activeTrap states. Also, handlers to modified them to open and close the modal. A simple example:
The actions to open and close the modal, only should dispatch the proper instructions to the store. Examples:

At the

Code Block

language	js
theme	DJango


import {BaseStore} from 'fluxible/addons';

class ExampleModalStore extends BaseStore{
    constructor(dispatcher) {
        super(dispatcher);
        this.openModal = false;
        this.activeTrap = false;
    }

    getState(){
        return {
            openModal : this.openModal,
            activeTrap : this.activeTrap
        };
    }
    dehydrate() {
        return this.getState();
    }
    rehydrate(state) {
        this.openModal = state.openModal;

    }
    openExampleModal(payload){
        this.openModal = true;
        this.activeTrap = true;
        this.emitChange();

    }
    closeExampleModal(payload){
        this.openModal = false;
        this.activeTrap = false;
        this.emitChange();
    }



}
ExampleModalStore.storeName = 'AttachSubdeckModalStore';
ExampleModalStore.handlers = {
    'EXAMPLE_MODAL_OPEN' : 'openExampleModal',
    'EXAMPLE_MODAL_LOSE': 'closeExampleModal'

};

export default ExampleModalStore;

The actions to open and close the modal, only should dispatch the proper instructions to the store. Examples:

Code Block

language	js
theme	DJango

export default function openAttachModal(context, payload, done) {
    console.log('action');
    context.dispatch('EXAMPLE_MODAL_OPEN', payload);
    done();
}

Code Block

language	js
theme	DJango

export default function closeAttachModal(context, payload, done) {
    context.dispatch('EXAMPLE_MODAL_LOSE', payload);
    done();
}

At the modal component, we should connect it to the store and modify a little the way in which we manage the state:
1. Connecting to the store:
  Code Block
  language js
  theme DJango
2. Changes at the constructor:
3. Update the state
4. Close method shoul call the proper action:
The open method called from another component should call the corresponding action

Versions Compared

Old Version 12

New Version 13

Key