@team-griffin/redux-modal-router
v1.3.0
Published
```sh yarn add @team-griffin/redux-modal-router
Downloads
15
Keywords
Readme
redux-modal-router
yarn add @team-griffin/redux-modal-router
npm i --save @team-griffin/redux-modal-router
Usage
import { ModalRoute } from '@team-griffin/redux-modal-router';
const openFoo = () => store.dispatch(signals.open({
route: 'FOO',
params: {
text: 'Hello World, I am FOO!',
},
}));
const openBar = () => store.dispatch(signals.open({
route: 'BAR',
}));
return (
<div>
<div>
<ModalRoute path="FOO" render={({
closeModal,
params,
}) => (
<Modal
isOpen={true}
onRequestClose={closeModal}
>
<div>
{params.text}
</div>
</Modal>
)}/>
</div>
<ModalRoute path="BAR" render={({ closeModal }) => (
<Modal
isOpen={true}
onRequestClose={closeModal}
>
<div>Hello World, I am BAR!</div>
</Modal>
)}/>
<button type="button" onClick={openFoo}>
Open FOO
</button>
<button type="button" onClick={openBar}>
Open BAR
</button>
</div>
);
Setup
Method 1 - As an isolated middleware
import {
reducer as modalReducer,
middleware,
REDUCER_MOUNT_POINT,
} from '@team-griffin/redux-modal-router';
const reducer = combineReducers({
[REDUCER_MOUNT_POINT]: modalReducer,
});
const store = createStore(
reducer,
composeEnhancers(
applyMiddleware(
middleware,
),
)
);
Method 2 - As an redux-most epic
import {
reducer as modalReducer,
epic,
REDUCER_MOUNT_POINT,
} from '@team-griffin/redux-modal-router';
const epicMiddleware = createEpicMiddleware(combineEpics([
epic,
]));
const reducer = combineReducers({
[REDUCER_MOUNT_POINT]: modalReducer,
});
const store = createStore(
reducer,
composeEnhancers(
applyMiddleware(
epicMiddleware,
),
)
);