@nimel/directorr-next
v1.0.0-rc.18
Published
Nextjs binding for directorr
Downloads
1
Readme
directorr-next
Directorr HOC for Next.js
Installation
Run npm install @nimel/directorr-next --save or yarn add @nimel/directorr-next
API
nextWithDirectorr(ReactComponent)
Commonly used in _app.js
import createSagaMiddleware from 'redux-saga';
import App from 'next/app';
import nextWithDirectorr, { MakeDirectorr, IWithDirectorrAppProps } from '@nimel/directorr-next';
export const makeDirectorr: MakeDirectorr = (ctx, initialState?: IDirectorrStoresState) => {
const sagaMiddleware = createSagaMiddleware();
const logMiddleware = createLogMiddleware();
const directorr = new Directorr();
directorr.addInitState(initialState);
directorr.addReduxMiddlewares(logMiddleware, sagaMiddleware);
sagaMiddleware.run(sagas);
return directorr;
};
class CustomApp extends App<IWithDirectorrAppProps> {
render() {
const { Component } = this.props;
return (
<>
<Head>
<title>aggregion-test</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Component />
</>
);
}
}
export default nextWithDirectorr(makeDirectorr)(CustomApp);And in some page file
import { useTempStore } from '@nimel/directorr-react';
import { IDirectorr } from '@nimel/directorr';
import { observer } from 'mobx-react-lite';
import AppStore from 'stores/AppStore';
function ListItem({ job }) {
return <li>{`${job.title}`}</li>;
}
function App() {
const { somedata } = useTempStore(AppStore);
return (
<div>
{somedata}
</div>
);
}
App.whenLoadDirectorr = async (directorr: IDirectorr) => {
directorr.addStores(AppStore);
};
export default observer(App);