// Root component
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { enhanceStore } from 'redux-fly';
import Counter from './Counter';

const store = createStore(() => {}, enhanceStore);

export default () => (
  <Provider store={store}>
    <Counter/>
  </Provider>
);

// Counter component
import React from 'react';
import { createReducer } from 'redux-fly';

const Counter = ({ reduxState: { counter }, reduxSetState }) => (
  <div>
    Clicked: {counter} times
    {' '}
    <button onClick={() => reduxSetState('INCREMENT', state => ({ counter: state.counter + 1 }))}>
      +
    </button>
  </div>
);

export default createReducer({
  mountPath: 'ui counter', // Reducer mounting path
  initialState: {
    counter: 0
  }
})(Counter);

// Modal window component
import React from 'react';
import { createReducer, getState } from 'redux-fly';
import { MENU_OPEN } from './Menu'; // Action of other component

const Modal = ({ reduxState: { opened }, children, reduxSetState }) => (
  <div style={{ display: opened ? 'block' : 'none' }}>
    <a onClick={() => reduxSetState('PRIVATE-CLOSE-MODAL', { opened: false })}>&times;</a>
    {children}
  </div>
);

// Type of window closing action (other components might listen in reducers)
export const actionPrivateCloseModal = (actionPrefix) => `${actionPrefix}/@PRIVATE-CLOSE-MODAL`;

// To open a modal is public action creator (other components might control the state)
export const createActionOpenModal = (actionPrefix) => ({ type: `${actionPrefix}/PUBLIC-OPEN-MODAL` });

// To close a modal is public action creator (other components might control the state)
export const createActionCloseModal = (actionPrefix) => ({ type: `${actionPrefix}/PUBLIC-CLOSE-MODAL` });

// Check is opened modal (other components might check the state)
export const isOpened = (mountPath, allState) => {
  const state = getState(mountPath)(allState)
  if (state) {
    return state.opened
  } else {
    throw new Error(`Mounting path ${mountPath} isn't valid`)
  }
}

export default createReducer({
  initialState: ({
    opened: false
  }),
  listenActions: (state, action, props, actionPrefix) => { // Listen public actions
    switch (action.type) {
      case createActionOpenModal(actionPrefix).type: // Listen own action
        return { ...state, opened: true };

      case MENU_OPEN: // Listen action of other component
      case createActionCloseModal(actionPrefix).type: // Listen own action
        return { ...state, opened: false };

      default:
        return state;
    }
  }
})(Modal);

import React from 'react';
import { registerReducers } from 'redux-fly';
import { connect } from 'react-redux';
import { compose } from 'redux';
import reducer, { * as actionCreators } from './reducer';

const Counter = ({ counter, increment }) => (
  <div>
    Clicked: {counter} times
    {' '}
    <button onClick={() => increment()}>
      +
    </button>
  </div>
);

export default compose(
  registerReducers({
    'ui counter': reducer
  }),
  connect((state) => ({ counter: state.ui.counter.value }), actionCreators)
)(Counter);