effector-ssr.js

/************** Effector **************/
import {doSomethingFx} from '../store/actions';

export function FancyComponent() {
  return (
    <div>
      <button onClick={doSomethingFx}>Click me</button>
    </div>
  );
}










/************** Redux **************/
import {useCallback} from 'react';
import {useDispatch} from 'react-redux';
import {doSomething} from '../store/actions';

export function FancyComponent2() {
  const dispatch = useDispatch();

  const onClick = useCallback(() => {
    dispatch(doSomething());
  }, [dispatch, doSomething]);
  // or
  const onClick = useAction(doSomething, []);

  return (
    <div>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}











/************** Effector with SSR **************/
import {useEvent} from 'effector-react/ssr';
import {doSomethingFx} from '../store/actions';

function FancyComponent2() {
  const doSomethingFn = doSomethingFx;

  return (
    <div>
      <button onClick={doSomethingFn}>Click me</button>
    </div>
  );
}











/****************************************/

// utils/effector.ts
import {useEvent, useStore} from 'effector-react';
import {useEvent as useEventSsr, useStore as useStoreSsr, Provider} from 'effector-react/ssr';

if (process.browser) {
  module.exports = {
    useEvent,
    useStore,
    Provider = ({ children }) => children,
  }
} else {
  module.exports = {
    useEvent: useEventSsr,
    useStore: useStoreSsr,
    Provider,
  }
}







/*
 * ###################################
 * #              SSR                #
 * ###################################
 */











/************** 1 **************/

// pages/index.tsx:
async function getInitialProps(ctx) {
  await allSettled(initPageFx, {scope: ctx.scope, params: ctx.pageParams});
}

// actions/mainPage.ts:
const initPageFx = domain.createEffect(async ({name}) => {
  const url = `https://api.github.com/users/${name}/repos`;

  const res = await fetch(url);

  return res.json();
});












/************** 2 **************/

// pages/index.tsx:
async function getInitialProps(ctx) {
  await allSettled(initPageFx, {scope: ctx.scope, params: ctx.pageParams});
}

// actions/mainPage.ts:
import $auth from '../store/auth';
import putDataIntoStoreFx from '../store/some';

const initPageFx = domain.createEffect(async ({name}) => {
  const url = `https://api.github.com/users/${name}/repos`;

  $auth.getState(); // => { userId: 'some123', accessToken: 'abc' }
  putDataIntoStoreFx({someData: 123}); // => ok

  const res = await fetch(url);
  const data = await res.json();

  $auth.getState(); // => {}
  putDataIntoStoreFx(data); // => ???
});










/************** 3 **************/

// pages/index.tsx:
async function getInitialProps(ctx) {
  await allSettled(initPageFx, {scope: ctx.scope, params: ctx.pageParams});
}

// actions/mainPage.ts:
import $auth from '../store/auth';
import putDataIntoStore from '../store/some';

const initPageFx = domain.createEffect(async ({name}) => {
  const putDataIntoStoreBound = scopeBind(putDataIntoStore);

  const url = `https://api.github.com/users/${name}/repos`;

  $auth.getState(); // => { userId: 'some123', accessToken: 'abc' }
  putDataIntoStore({someData: 123}); // => ok

  const res = await fetch(url);
  const data = await res.json();

  $auth.getState(); // => {} - WHAT??
  putDataIntoStoreBound(data); // => ok!!
});










/************** 4 **************/

// pages/index.tsx:
async function getInitialProps(ctx) {
  await allSettled(initPageFx, {scope: ctx.scope, params: {...ctx.pageParams, scope: ctx.scope}});
}

// actions/mainPage.ts:
import $auth from '../store/auth';
import putDataIntoStore from '../store/some';

const initPageFx = domain.createEffect(async ({name, scope}) => {
  const putDataIntoStoreBound = scopeBind(putDataIntoStore);

  const url = `https://api.github.com/users/${name}/repos`;

  $auth.getState(); // => { userId: 'some123', accessToken: 'abc' }
  putDataIntoStore({someData: 123}); // => ok

  const res = await fetch(url);
  const data = await res.json();

  // $auth.getState(); // => {} - WHAT??
  scope.getState($auth); // => { userId: 'some123', accessToken: 'abc' } // ok!!
  putDataIntoStoreBound(data); // => ok!!
});









/**/
await scope.exec(putDataIntoStore, {someParam: '...'});
/**/










/************** Redux Dependency Injection **************/

const doSomeAction = (name) => {
  console.log(`My name is ${name}`);
};

// Need actions

const doSomeAction = (name) => (dispatch) => {
  console.log(`My name is ${name}`);
  dispatch(sendActionMetrics());
};

// Need state

const doSomeAction = (name) => (getState) => {
  console.log(`My name is ${name} ${getState().user.lastName}`);
};