Last active
August 21, 2019 19:30
-
-
Save belozer/8edce46775acafc8ffd5c80ff4a340ed to your computer and use it in GitHub Desktop.
NextJS effector
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "presets": ["next/babel"], | |
| "plugins": ["effector/babel-plugin"] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Document, { Html, Head, Main, NextScript } from 'next/document' | |
| import { appState } from '../src/store'; | |
| class MyDocument extends Document { | |
| render() { | |
| return ( | |
| <Html> | |
| <Head /> | |
| <body> | |
| <Main /> | |
| <NextScript /> | |
| <script dangerouslySetInnerHTML={{__html: `window.__INITIAL_DATA__ = ${JSON.stringify(appState)}`}} /> | |
| </body> | |
| </Html> | |
| ) | |
| } | |
| } | |
| export default MyDocument |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createDomain } from 'effector'; | |
| export const domain = createDomain('App'); | |
| export const { event: createEvent, store: createStore } = domain; | |
| export const appState = {} as any; | |
| domain.onCreateStore(store => { | |
| const { sid } = (store as any).defaultConfig; | |
| if (typeof window !== 'undefined') { | |
| // Fill stores | |
| const data = (window as any).__INITIAL_DATA__ | |
| if (data[sid]) store.defaultState = data[sid]; | |
| store.setState(store.defaultState); | |
| } else { | |
| // Collect data from stores for push to client side | |
| store.watch(state => appState[(store as any).defaultConfig.sid] = state); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Use app domain for create stores | |
| import { createStore, createEvent } from '.'; | |
| import { IProduct } from '../typings/Product'; | |
| type Dictionary = { | |
| [key: string]: IProduct | null | |
| } | |
| export const addProduct = createEvent<IProduct>(); | |
| export const setProducts = createEvent<Dictionary>(); | |
| export const removeProduct = createEvent<number>(); | |
| export const productsStore = createStore<Dictionary>({}) | |
| .on(setProducts, (_state, payload: Dictionary) => payload) | |
| .on(addProduct, (state, product: IProduct) => ({ | |
| ...state, | |
| [product.id]: product | |
| })) | |
| .on(removeProduct, (state, productId: number) => ({ | |
| ...state, | |
| [productId]: null | |
| })); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment