Replace @@ on @ for private actions.

For props actionPrefix and reduxActionPrefix now automatically add at the end /.
Explicit passed / is necessary between action prefix and action type.
Update examples and README.md.

README.md

@@ -53,20 +53,23 @@ import { createReducer, getState } from 'redux-fly';
 import { MENU_OPEN } from './Menu'; // Action of other component
 
 // Type of window closing action (other components might listen in reducers)
-export const actionPrivateCloseModal = (actionPrefix) => `${actionPrefix}@@PRIVATE-CLOSE-MODAL`;
+export const actionPrivateCloseModal = (actionPrefix) => `${actionPrefix}/@PRIVATE-CLOSE-MODAL`;
 
 // To open a modal is public action creator (other components might control the state)
-export const openModal = (actionPrefix) => ({
-  type: `${actionPrefix}PUBLIC-OPEN-MODAL`
-});
+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 closeModal = (actionPrefix) => ({
-  type: `${actionPrefix}PUBLIC-CLOSE-MODAL`
-});
+export const createActionCloseModal = (actionPrefix) => ({ type: `${actionPrefix}/PUBLIC-CLOSE-MODAL` });
 
 // Check is opened modal (other components might check the state)
-export const isOpened = (mountPath) => (state) => getState(mountPath)(state).opened;
+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`)
+  }
+}
 
 const Modal = ({ reduxState: { opened }, children, reduxSetState }) => (
   <div style={{ display: opened ? 'block' : 'none' }}>
@@ -80,8 +83,8 @@ export default createReducer({
     opened: false
   }),
   listenActions: (props, actionPrefix) => ({ // Listen public actions
-    [`${actionPrefix}PUBLIC-OPEN-MODAL`]: (state, action) => ({ opened: true }),
-    [`${actionPrefix}PUBLIC-CLOSE-MODAL`]: (state, action) => ({ opened: false })
+    [createActionOpenModal(actionPrefix).type]: (state, action) => ({ opened: true }),
+    [createActionCloseModal(actionPrefix).type]: (state, action) => ({ opened: false })
     [MENU_OPEN]: (state, action) => ({ opened: false }) // Listen action of other component
   })
 })(Modal);

__tests__/__snapshots__/createReducer.test.js.snap

@@ -2,7 +2,7 @@ exports[`test Test connectToStore: false 1`] = `<div />`;
 
 exports[`test Test empty (default) actionPrefix 1`] = `
 <div>
-  ui component/
+  ui component
 </div>
 `;
 
@@ -135,7 +135,7 @@ exports[`test Test valid init component with provide enhanced redux store 1`] =
     true
   </span>
   <span>
-    ui component/
+    ui component
   </span>
   <span>
     function
@@ -158,7 +158,7 @@ exports[`test Test valid init component with provide is pure redux store 1`] = `
     true
   </span>
   <span>
-    ui component/
+    ui component
   </span>
   <span>
     function
@@ -184,7 +184,7 @@ exports[`test Test valid init component without provide redux store 1`] = `
     true
   </span>
   <span>
-    ui component/
+    ui component
   </span>
   <span>
     function

__tests__/createReducer.test.js

@@ -272,8 +272,8 @@ test('Test listenActions', () => {
 
   class Component extends React.Component {
     componentDidMount() {
-      const { dispatch } = this.props
-      dispatch({ type: `ui component/${UPDATE_TODO}`, text: 'My second todo' })
+      const { dispatch, reduxActionPrefix } = this.props
+      dispatch({ type: `${reduxActionPrefix}/${UPDATE_TODO}`, text: 'My second todo' })
     }
     render() {
       const { props } = this
@@ -284,7 +284,8 @@ test('Test listenActions', () => {
   }
   Component.propTypes = {
     reduxState: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired
+    dispatch: PropTypes.func.isRequired,
+    reduxActionPrefix: PropTypes.string.isRequired
   }
   const ExtendedComponent = compose(
     createReducer({
@@ -308,8 +309,8 @@ test('Test listenActions is function', () => {
 
   class Component extends React.Component {
     componentDidMount() {
-      const { dispatch, text } = this.props
-      dispatch({ type: `ui component/${UPDATE_TODO}`, text })
+      const { dispatch, text, reduxActionPrefix } = this.props
+      dispatch({ type: `${reduxActionPrefix}/${UPDATE_TODO}`, text })
     }
     render() {
       const { props } = this
@@ -321,14 +322,15 @@ test('Test listenActions is function', () => {
   Component.propTypes = {
     reduxState: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
-    text: PropTypes.string.isRequired
+    text: PropTypes.string.isRequired,
+    reduxActionPrefix: PropTypes.string.isRequired
   }
   const ExtendedComponent = compose(
     createReducer({
       mountPath: 'ui component',
       initialState: { text: 'My first todo' },
       listenActions: (props, actionPrefix) =>
-        ({ [`${actionPrefix}${UPDATE_TODO}`]: (state, action) => ({ text: action.text, num: props.num }) })
+        ({ [`${actionPrefix}/${UPDATE_TODO}`]: (state, action) => ({ text: action.text, num: props.num }) })
     })
   )(Component)
 
@@ -346,8 +348,8 @@ test('Test listenActions is function in reusable component', () => {
 
   class Component extends React.Component {
     componentDidMount() {
-      const { dispatch, text } = this.props
-      dispatch({ type: `ui component/${UPDATE_TODO}`, text })
+      const { dispatch, text, reduxActionPrefix } = this.props
+      dispatch({ type: `${reduxActionPrefix}/${UPDATE_TODO}`, text })
     }
     render() {
       const { props } = this
@@ -359,14 +361,15 @@ test('Test listenActions is function in reusable component', () => {
   Component.propTypes = {
     reduxState: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
-    text: PropTypes.string.isRequired
+    text: PropTypes.string.isRequired,
+    reduxActionPrefix: PropTypes.string.isRequired
   }
   const ExtendedComponent = compose(
     createReducer({
       mountPath: 'main',
       initialState: { text: 'My first todo' },
       listenActions: (props, actionPrefix) =>
-        ({ [`${actionPrefix}${UPDATE_TODO}`]: (state, action) => ({ text: action.text, num: props.num }) })
+        ({ [`${actionPrefix}/${UPDATE_TODO}`]: (state, action) => ({ text: action.text, num: props.num }) })
     })
   )(Component)
 
@@ -472,7 +475,7 @@ test('Test empty (default) actionPrefix', () => {
     if (actionType === 'reset') {
       expect(action.type).toBe(`ui component/${RESET_STATE}`)
     } else {
-      expect(action.type).toBe('ui component/@@UPDATE-TODO')
+      expect(action.type).toBe('ui component/@UPDATE-TODO')
     }
   }
   const store = createStore(() => {}, compose(applyMiddleware(middleware), enhanceStore))

examples/nested_reused_components/src/components/Modal.js

@@ -4,7 +4,7 @@ import { createReducer } from 'redux-fly'
 import Button from './Button'
 
 // Public actions (other components might control)
-export const PUBLIC_OPEN_MODAL = 'PUBLIC-OPEN-MODAL'
+export const createActionOpenModal = (actionPrefix: string) => ({ type: `${actionPrefix}/PUBLIC-OPEN-MODAL` })
 
 const style = {
   container: (opened) => ({
@@ -49,7 +49,7 @@ export default createReducer({
     opened: false
   },
   listenActions: (props, actionPrefix) => ({ // Listen public actions
-    [`${actionPrefix}${PUBLIC_OPEN_MODAL}`]: () => ({ // Listen action to open a modal
+    [createActionOpenModal(actionPrefix).type]: () => ({ // Listen action to open a modal
       opened: true
     })
   })

examples/nested_reused_components/src/containers/page/LeftFrame.js

@@ -1,18 +1,17 @@
 //@flow
 import React from 'react'
-import Modal, { PUBLIC_OPEN_MODAL } from '../../components/Modal'
+import Modal, { createActionOpenModal } from '../../components/Modal'
 import { connect } from 'react-redux'
 
 const modalMountPath = 'leftFrame modal'
-const modalActionPrefix = `${modalMountPath}/`
 
 const LeftFrame = ({ dispatch }: { dispatch: Function }) => (
   <div style={{ position: 'relative' }}>
     <h1>Left frame</h1>
-    <button onClick={() => dispatch({ type: `${modalActionPrefix}${PUBLIC_OPEN_MODAL}` })}>
+    <button onClick={() => dispatch(createActionOpenModal(modalMountPath))}>
       Open
     </button>
-    <Modal reduxMountPath={modalMountPath}/>
+    <Modal reduxMountPath={modalMountPath} />
   </div>
 )
 

examples/nested_reused_components/src/containers/page/RightFrame.js

@@ -1,18 +1,17 @@
 //@flow
 import React from 'react'
-import Modal, { PUBLIC_OPEN_MODAL } from '../../components/Modal'
+import Modal, { createActionOpenModal } from '../../components/Modal'
 import { connect } from 'react-redux'
 
 const modalMountPath = 'rightFrame modal'
-const modalActionPrefix = `${modalMountPath}/`
 
 const RightFrame = ({ dispatch }: { dispatch: Function }) => (
   <div style={{ position: 'relative' }}>
     <h1>Right frame</h1>
-    <button onClick={() => dispatch({ type: `${modalActionPrefix}${PUBLIC_OPEN_MODAL}` })}>
+    <button onClick={() => dispatch(createActionOpenModal(modalMountPath))}>
       Open
     </button>
-    <Modal reduxMountPath={modalMountPath}/>
+    <Modal reduxMountPath={modalMountPath} />
   </div>
 )
 

examples/reused_components/src/components/Modal.js

@@ -2,15 +2,24 @@
 import React from 'react'
 import { createReducer, getState } from 'redux-fly'
 
-// Public actions (other components might control)
-export const PUBLIC_OPEN_MODAL = 'PUBLIC-OPEN-MODAL'
-export const PUBLIC_CLOSE_MODAL = 'PUBLIC-CLOSE-MODAL'
+// Type of window closing action (other components might listen in reducers)
+export const actionPrivateCloseModal = (actionPrefix: string) => `${actionPrefix}/@PRIVATE-CLOSE-MODAL`
 
-// Private action (other components might listen)
-export const PRIVATE_CLOSE_MODAL = '@@PRIVATE-CLOSE-MODAL'
+// To open a modal is public action creator (other components might control the state)
+export const createActionOpenModal = (actionPrefix: string) => ({ type: `${actionPrefix}/PUBLIC-OPEN-MODAL` })
+
+// To close a modal is public action creator (other components might control the state)
+export const createActionCloseModal = (actionPrefix: string) => ({ type: `${actionPrefix}/PUBLIC-CLOSE-MODAL` })
 
 // Check is opened modal (other components might check)
-export const isOpened = (mountPath: string, state: Object) => getState(mountPath)(state).opened
+export const isOpened = (mountPath: string, allState: Object) => {
+  const state = getState(mountPath)(allState)
+  if (state) {
+    return state.opened
+  } else {
+    throw new Error(`Mounting path ${mountPath} isn't valid`)
+  }
+}
 
 const style = {
   container: (opened) => ({
@@ -45,7 +54,7 @@ const Modal = ({ reduxState: { opened }, children = 'Hi, I is modal', reduxSetSt
   <div style={style.container(opened)}>
     <a style={style.linkClose} onClick={() => reduxSetState('PRIVATE-CLOSE-MODAL', { opened: false })}>&times;</a>
     {children}
-    <button style={style.buttonClose} onClick={() => dispatch({ type: `${reduxActionPrefix}${PUBLIC_CLOSE_MODAL}` })}>
+    <button style={style.buttonClose} onClick={() => dispatch(createActionCloseModal(reduxActionPrefix))}>
       Close by public action
     </button>
   </div>
@@ -56,10 +65,10 @@ export default createReducer({
     opened: false
   },
   listenActions: (props, actionPrefix) => ({ // Listen public actions
-    [`${actionPrefix}${PUBLIC_OPEN_MODAL}`]: () => ({ // Listen action to open a modal
+    [createActionOpenModal(actionPrefix).type]: () => ({ // Listen action to open a modal
       opened: true
     }),
-    [`${actionPrefix}${PUBLIC_CLOSE_MODAL}`]: () => ({ // Listen action to close a modal
+    [createActionCloseModal(actionPrefix).type]: () => ({ // Listen action to close a modal
       opened: false
     })
   })

examples/reused_components/src/containers/page/Footer.js

@@ -21,11 +21,11 @@ export default createReducer({
     logs: []
   },
   listenActions: {
-    [leftOpenModal().type]: saveLog('Left frame open modal (public action)'),
-    [leftCloseModal().type]: saveLog('Left frame close modal (public action)'),
+    [leftOpenModal.type]: saveLog('Left frame open modal (public action)'),
+    [leftCloseModal.type]: saveLog('Left frame close modal (public action)'),
     [leftPrivateCloseModal]: saveLog('Left frame close modal (private action)'),
-    [rightOpenModal().type]: saveLog('Right frame open modal (public action)'),
-    [rightCloseModal().type]: saveLog('Right frame close modal (public action)'),
+    [rightOpenModal.type]: saveLog('Right frame open modal (public action)'),
+    [rightCloseModal.type]: saveLog('Right frame close modal (public action)'),
     [rightPrivateCloseModal]: saveLog('Right frame close modal (private action)'),
   }
 })(Footer)

examples/reused_components/src/containers/page/LeftFrame.js

@@ -1,50 +1,46 @@
 //@flow
 import React, { PropTypes } from 'react'
-import Modal, { PUBLIC_OPEN_MODAL, PUBLIC_CLOSE_MODAL, PRIVATE_CLOSE_MODAL, isOpened } from '../../components/Modal'
+import Modal, { createActionOpenModal, createActionCloseModal, actionPrivateCloseModal, isOpened } from '../../components/Modal'
 import { connect } from 'react-redux'
 import { openModal as rightOpenModal, closeModal as rightCloseModal, isOpenedModal as rightIsOpenedModal } from './RightFrame'
 import { compose, getContext } from 'recompose'
 
 const modalMountPath = 'leftFrame modal'
-const modalActionPrefix = `${modalMountPath}/`
 
 // Check is opened modal
 export const isOpenedModal = (state: Object) => isOpened(modalMountPath, state)
 
-// To open a modal is action creator
-export const openModal = () => ({
-  type: `${modalActionPrefix}${PUBLIC_OPEN_MODAL}`
-})
-// To close a modal is action creator
-export const closeModal = () => ({
-  type: `${modalActionPrefix}${PUBLIC_CLOSE_MODAL}`
-})
+// To open a modal is action
+export const openModal = createActionOpenModal(modalMountPath)
 
-// Listen private action
-export const privateCloseModal = `${modalActionPrefix}${PRIVATE_CLOSE_MODAL}`
+// To close a modal is action
+export const closeModal = createActionCloseModal(modalMountPath)
+
+// Listen private action close modal
+export const privateCloseModal = actionPrivateCloseModal(modalMountPath)
 
 // To toggle opened a right frame modal
 const toggleRight = (dispatch, store) => {
   if (rightIsOpenedModal(store.getState())) {
-    dispatch(rightCloseModal())
+    dispatch(rightCloseModal)
   } else {
-    dispatch(rightOpenModal())
+    dispatch(rightOpenModal)
   }
 }
 
 const LeftFrame = ({ dispatch, store }: { dispatch: Function, store: Object }) => (
   <div style={{ position: 'relative' }}>
     <h1>Left frame</h1>
-    <button onClick={() => dispatch({ type: `${modalActionPrefix}${PUBLIC_OPEN_MODAL}` })}>
+    <button onClick={() => dispatch(openModal)}>
       Open
     </button>
     <br/><br/>
-    <button onClick={() => dispatch(rightOpenModal())}>
+    <button onClick={() => dispatch(rightOpenModal)}>
       Open right
     </button>
     <button
       style={{ marginLeft: '10px'}}
-      onClick={() => dispatch(rightCloseModal())}
+      onClick={() => dispatch(rightCloseModal)}
     >
       Close right
     </button>