दीपक-लुवाक के साथ सेवा उन्मुख राज्य प्रबंधन

इस तथ्य के कारण कि रिएक्ट प्रदर्शन के साथ काम करने की अद्भुत क्षमता प्रदान करता है, आप केवल एप्लिकेशन लॉजिक और कोड के शब्दार्थ को व्यवस्थित करने पर ध्यान केंद्रित कर सकते हैं जो बताता है कि डेटा के साथ कैसे काम किया जाए। उन। राज्य प्रबंधन पुस्तकालय का चयन, भविष्य की कोड आधार की शैली का विकल्प होता है।

इस लेख में, हम एक पुस्तकालय के माध्यम से कार्यान्वित सेवा-स्टोर-आधारित दृष्टिकोण पर विचार करेंगे lamp-luwak।

टीएल; डीआर जो भी कोड लिखना शुरू करना चाहता है वह अगले पैराग्राफ को छोड़ सकता है।

आपके एप्लिकेशन के अंदर सभी तर्क सेवाओं में विभाजित हैं, प्रत्येक सेवा में एक ही पक्ष होता है, जिसमें से परिवर्तन ग्राहकों को सूचित करता है। इस सेवा में तर्क कार्य भी शामिल हैं जहाँ आप अन्य सेवाओं का उपयोग कर सकते हैं और अपरिवर्तनीय पक्ष को फिर से लिख सकते हैं, ये फ़ंक्शन अतुल्यकालिक हो सकते हैं और साइड इफेक्ट हो सकते हैं।

lamp-luwak , . , React useProvide useSubscribe . , , .

, - . , embedded . .

subscribe. .

, todo- :

• ;
• / ;
• /.

todos create-react-app

npx create-react-app todos --template typescript --use-npm
# or
yarn create react-app todos --template typescript

lamp-luwak todos

npm i --save lamp-luwak
# or
yarn add lamp-luwak

, React - , - .

— -, , .
-, store.

class Todos {
  store = [ /*...*/ ];
  // ...

store . .

class TodoCounters {
  todo = provide(Todo);
  // ...

provide , , Todo.
React

const List = () => {
  const todo = useProvide(Todo);
  // ...
};

-. React useProvide, — - , Todo. , .

— , , store provide useProvide / , .

, List Todo.

services, React components .

sr/
  components/       //   React  
    Counters.tsx    //     
    Input.tsx       //     
    Task.tsx        // 
    List.tsx        //  
  services/         //   
    Todo/
      Task.ts       // 
    Todo.ts         //   
    TodoCounters.ts //      
  App.tsx           //   

2- . :

• Todo — , add ;
• TodoCounters — .

Todo , Task, .. , , . , , . , Date, Map, Set. ( SSR) , UI. , . , Task toggle, .

Task, , create, -, - .

// Todo.ts
import { create } from 'lamp-luwak';
import { Task } from './Todo/Task';

export class Todo {
  store = [
    create(Task, { id: 1, label: 'Cook the dinner', completed: false }),
    create(Task, { id: 2, label: 'Cook the breakfast', completed: true })
  ]
  add(label: string) {
    this.store = this.store.concat(
      create(Task, { id: Date.now(), label, completed: false })
    );
  }
}

Todo. store Task, create. add, , Task. id, Date.now.

// Todo/Task.ts
import { subscribe, modify, action } from 'lamp-luwak';

type Store = {
  id: number,
  label: string,
  completed: boolean
}

export const TaskChanged = action();

export class Task {
  store: Store;
  constructor(store: Store) {
    this.store = store;
    subscribe(this, TaskChanged);
  }
  toggle() {
    modify(this).completed = !this.store.completed;
  }
}

Task, . : id , label completed. toggle, , modify, , .

TaskChanged, action.

— , . , — dispatch lamp-luwak.

, , TaskChanged Task. subscribe, — , .. , — , . TaskChanged, .

// TodoCounters.ts
import { provide, subscribe } from 'lamp-luwak';
import { Todo } from './Todo';
import { TaskChanged } from './Todo/Task';

export class TodoCounters {
  todo = provide(Todo);
  store = {
    active: 0,
    completed: 0
  }
  constructor() {
    subscribe(this.todo, this.calculate, this);
    subscribe(TaskChanged, this.calculate, this);
    this.calculate();
  }
  calculate() {
    const items = this.todo.store;
    const completed = items.filter(item => item.store.completed).length;
    const active = items.length - completed;
    this.store = { completed, active };
  }
}

TodoCounters, . 2- :

• Todo, , .
• TaskChanged , - Task, completed, .

calculate.

:

App.tsx, .

List — .

// List.tsx
import React from 'react';
import { useProvide } from 'lamp-luwak';
import { Todo } from '../services/Todo';
import { Task } from './Task';

export const List = () => {
  const todo = useProvide(Todo);
  const items = todo.store;
  if (items.length === 0) return null;
  return (
    <ul>
      {items.map(item => (
        <Task task={item} key={item.store.id} />
      ))}
    </ul>
  )
};

Todo, useProvide, List, , , . , .

Task — .

// Task.tsx
import React, { FC } from 'react';
import { useSubscribe } from 'lamp-luwak';
import { Task as TaskClass } from '../services/Todo/Task';

export const Task: FC<{ task: TaskClass }> = ({ task }) => {
  useSubscribe(task);
  const { label, completed } = task.store;
  return (
    <li>
      <input
          className="toggle"
          type="checkbox"
          checked={completed}
          onChange={() => task.toggle()}
        />
      <span style={{
        textDecoration: completed ? 'line-through' : 'none'
      }}>
        {label}
      </span>
    </li>
  )
};

Task, , useSubscribe, . , toggle .

Counters — .

// Counters.tsx
import React from 'react';
import { useProvide } from 'lamp-luwak';
import { TodoCounters } from '../services/TodoCounters';

export const Counters = () => {
  const { active, completed } = useProvide(TodoCounters).store;
  return (
    <>
      <div>Active: {active}</div>
      <div>Completed: {completed}</div>
    </>
  )
};

, useProvide . , TodoCounters.

Input — .

add Todo. , Todo, React useState.

// Input.tsx
import React, { useState } from 'react';
import { useProvide } from 'lamp-luwak';
import { Todo } from '../services/Todo';

export const Input = () => {
  const [text, setText] = useState('Cook the lunch');
  const todo = useProvide(Todo);
  const add = () => {
    todo.add(text);
    setText('');
  };

  return (
    <>
      <input
        onChange={(e) => setText(e.target.value)}
        value={text}
        autoFocus
        onKeyDown={(event: any) => {
          if (event.keyCode === 13) add();
        }}
      />
      <button onClick={add}>Add</button>
    </>
  );
};

App.tsx, src , .

// App.tsx
import React from 'react';
import { Input } from './components/Input';
import { List } from './components/List';
import { Counters } from './components/Counters';

const App = () => (
  <>
    <Input />
    <List />
    <Counters />
  </>
);

export default App;

Enjoy! .

lamp-luwak, , . .

, .

, , , .
.

• Github ;
• NPM ;
• Codesandbox, Github;
• Codesandbox, Github.