Merge pull request #30 from effector/update-docs-and-example

Update docs and example

README.md

@@ -321,13 +321,36 @@ export default async function Page({ params }: { params: { slug: string } }) {
   );
 }
 ```
-☝️ It works the same for any other of Next.js special functions
+☝️ It works the same for any other of Next.js special functions: if you need to access the store value outside of client components, you will need to use `scope.getState`.
+
+**Server Actions example**
+
+1. Server actions must be created [as usual](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+```typescript
+// src/feature/action.ts
+"use server"
+
+export const myAction = async () => doServerOnlyStuff()
+```
+
+2. Then server action can be used in Effector models as an [effect handler](https://effector.dev/en/api/effector/createeffect/)
+
+```typescript
+// src/feature/model.ts
+import { createEffect } from "effector"
+import { myAction } from "./action.ts"
+
+const myActionFx = createEffect(myAction)
+```
+☝️ This effect can be called anywhere
 
 That's it.
-Just [write effector's models as usual](https://effector.dev/) and use effector's units anywhere in components code [via `useUnit` from `effector-react`](https://effector.dev/docs/api/effector-react/useUnit) 
 
 #### Don't forget about `use client` for client components:
 
+Just [write effector's models as usual](https://effector.dev/) and use effector's units anywhere in components code [via `useUnit` from `effector-react`](https://effector.dev/docs/api/effector-react/useUnit) - but don't forget, that to use hooks you need the `"use client"` directive.
+
 ```tsx
 // src/features/blog/post.view.tsx
 // you should use `use client`, if your component uses any hooks

apps/playground-app/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@effector/next": "^0.6.1",
     "@effector/redux-devtools-adapter": "^0.1.5",
-    "@effector/reflect": "^8.4.0",
+    "@effector/reflect": "^9.1.1",
     "@faker-js/faker": "^7.6.0",
     "@farfetched/core": "^0.11.0",
     "@farfetched/runtypes": "^0.11.0",
@@ -25,8 +25,8 @@
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "mvp.css": "^1.12.0",
-    "next": "13.4.0",
-    "patronum": "^2.0.0",
+    "next": "14.1.0",
+    "patronum": "^2.2.0",
     "postcss": "8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -37,5 +37,8 @@
   "devDependencies": {
     "fs-extra": "^11.1.1",
     "zx": "^7.2.1"
-  }
+  },
+  "browserslist": [
+    "last 2 years"
+  ]
 }

apps/playground-app/src/features/layout/view.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { AsyncCounter } from "#root/features/async-counter";
 import { MemoUpdatesBugCheck } from "#root/features/memo-check";
+import { ServerAction } from "#root/features/server-action";
 
 const links = [
   {
@@ -30,6 +31,7 @@ export function PageLayout(props: React.PropsWithChildren<{}>) {
           </h1>
           <small>Playground app to research Next.js + Effector</small>
           <MemoUpdatesBugCheck />
+          <ServerAction />
         </div>
         <AsyncCounter />
         <nav style={{ marginBottom: 0 }}>

apps/playground-app/src/features/server-action/hash-value.ts

@@ -0,0 +1,12 @@
+"use server";
+import { createHash } from "node:crypto";
+
+export const hashValue = async (value: string) => {
+
+  /**
+   * Simulates server-side activities like db queries, etc.
+   */
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  return createHash("sha256").update(value).digest("hex");
+};

apps/playground-app/src/features/server-action/index.ts

@@ -0,0 +1 @@
+export { ServerAction } from "./ui";