Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/team-griffin/redux-modal-router
https://github.com/team-griffin/redux-modal-router
modal react redux router
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/team-griffin/redux-modal-router
- Owner: team-griffin
- License: mit
- Created: 2017-04-14T19:07:22.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:28:47.000Z (about 2 years ago)
- Last Synced: 2024-04-26T04:21:48.749Z (8 months ago)
- Topics: modal, react, redux, router
- Language: JavaScript
- Size: 2.52 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-modal-router
```sh
yarn add @team-griffin/redux-modal-router
npm i --save @team-griffin/redux-modal-router
```
## Usage
```jsx
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 (
(
{params.text}
)}/>
(
Hello World, I am BAR!
)}/>
Open FOO
Open BAR
);
```
## Setup
### Method 1 - As an isolated middleware
```jsx
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
```jsx
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,
),
)
);
```