first commit

examples/with-rematch/shared/components/counter-display.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useRematchDispatch } from "../utils";
+
+const CounterDisplay = () => {
+  const counter = useSelector((state) => state.counter);
+  const { increment } = useRematchDispatch((dispatch) => ({
+    increment: dispatch.counter.increment,
+  }));
+  return (
+    <>
+      <h3> Counter </h3>
+      <p>
+        This counter is connected via the <b>useSelector</b> hook. Components
+        which are not pages can be connected using the useSelector hook just
+        like redux components.
+      </p>
+      <p>Current value {counter}</p>
+      <p>
+        <button onClick={() => increment(3)}>Increment by 3</button>
+      </p>
+    </>
+  );
+};
+
+export default CounterDisplay;

examples/with-rematch/shared/components/header.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Header = () => {
+  return (
+    <div>
+      <nav>
+        <ul>
+          <li>
+            <a href="/">Home</a>
+          </li>
+          <li>
+            <a href="/github-users">Async Example </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export default Header;

examples/with-rematch/shared/models/counter.js

@@ -0,0 +1,22 @@
+import { createModel } from "@rematch/core";
+
+const counter = createModel({
+  state: 0, // initial state
+  reducers: {
+    // handle state changes with pure functions
+    increment: (state, payload) => {
+      if (typeof payload === "object") return state + 1;
+      return state + payload;
+    },
+  },
+  effects: {
+    // handle state changes with impure functions.
+    // use async/await for async actions
+    async incrementAsync(payload, rootState) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      this.increment(payload);
+    },
+  },
+});
+
+export default counter;

examples/with-rematch/shared/models/github.js

@@ -0,0 +1,38 @@
+const github = {
+  state: {
+    users: [],
+    isLoading: false,
+  }, // initial state
+  reducers: {
+    requestUsers(state) {
+      return {
+        users: [],
+        isLoading: true,
+      };
+    },
+    receiveUsers(state, payload) {
+      return {
+        isLoading: false,
+        users: payload,
+      };
+    },
+  },
+  effects: {
+    // handle state changes with impure functions.
+    // use async/await for async actions
+    async fetchUsers() {
+      try {
+        this.requestUsers();
+        const response = await fetch("https://api.github.com/users");
+        const users = await response.json();
+        this.receiveUsers(users);
+        return users;
+      } catch (err) {
+        console.log(err);
+        this.receiveUsers([]);
+      }
+    },
+  },
+};
+
+export default github;

examples/with-rematch/shared/models/index.js

@@ -0,0 +1,5 @@
+import counter from "./counter";
+import github from "./github";
+
+export { counter };
+export { github };

examples/with-rematch/shared/store.js

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { init } from "@rematch/core";
+import { counter, github } from "./models";
+
+let store;
+
+const exampleInitialState = {
+  counter: 5,
+};
+
+export const initStore = (initialState = exampleInitialState) =>
+  init({
+    models: {
+      counter,
+      github,
+    },
+    redux: {
+      initialState,
+    },
+  });
+
+export const initializeStore = (preloadedState) => {
+  let _store = store ?? initStore(preloadedState);
+
+  // After navigating to a page with an initial Redux state, merge that state
+  // with the current state in the store, and create a new store
+  if (preloadedState && store) {
+    _store = initStore({
+      ...store.getState(),
+      ...preloadedState,
+    });
+    // Reset the current store
+    store = undefined;
+  }
+
+  // For SSG and SSR always create a new store
+  if (typeof window === "undefined") return _store;
+  // Create the store once in the client
+  if (!store) store = _store;
+
+  return _store;
+};
+
+export function useStore(initialState) {
+  const store = useMemo(() => initializeStore(initialState), [initialState]);
+  return store;
+}

examples/with-rematch/shared/utils.js

@@ -0,0 +1,10 @@
+// Robust way to check if it's Node or browser
+import { useDispatch } from "react-redux";
+export const checkServer = () => {
+  return typeof window === "undefined";
+};
+
+export const useRematchDispatch = (selector) => {
+  const dispatch = useDispatch();
+  return selector(dispatch);
+};