Skip to content
This repository has been archived by the owner on Nov 9, 2019. It is now read-only.

Commit

Permalink
Replace @@ on @ for private actions.
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
MrEfrem committed Dec 1, 2016
1 parent dcc5de6 commit 85ea058
Show file tree
Hide file tree
Showing 14 changed files with 94 additions and 89 deletions.
23 changes: 13 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}>
Expand All @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions __tests__/__snapshots__/createReducer.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ exports[`test Test connectToStore: false 1`] = `<div />`;

exports[`test Test empty (default) actionPrefix 1`] = `
<div>
ui component/
ui component
</div>
`;

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
27 changes: 15 additions & 12 deletions __tests__/createReducer.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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({
Expand All @@ -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
Expand All @@ -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)

Expand All @@ -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
Expand All @@ -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)

Expand Down Expand Up @@ -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))
Expand Down
4 changes: 2 additions & 2 deletions examples/nested_reused_components/src/components/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => ({
Expand Down Expand Up @@ -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
})
})
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)

Expand Down
27 changes: 18 additions & 9 deletions examples/reused_components/src/components/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => ({
Expand Down Expand Up @@ -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>
Expand All @@ -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
})
})
Expand Down
8 changes: 4 additions & 4 deletions examples/reused_components/src/containers/page/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
30 changes: 13 additions & 17 deletions examples/reused_components/src/containers/page/LeftFrame.js
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading

0 comments on commit 85ea058

Please sign in to comment.