원클릭으로 Manus에서 모든 스킬 실행

react-store

스타0

포크1

업데이트2026년 7월 14일 20:18

ReactStore import, initialization, disposal, and Store-runtime guidance for the React signal Store variant. Use for @augmentcode/themis/react-store, inherited runSaga/dispatch/state behavior, and contrast with Svelte-readable Store or StreamingStore without teaching those call modes.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

augmentcode

augmentcode/themis

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

ReactStore import and lifecycle

Use this skill when a task needs the React signal Store variant. For shared state policy, reducers, actions, sagas, and package import boundaries, also follow the matching core/* skills.

Correct import and class choice

Use ReactStore from @augmentcode/themis/react-store.
Use Store from @augmentcode/themis/svelte-store only for a separate Svelte app whose direct selector calls should return Svelte readables.
Use StreamingStore from @augmentcode/themis/streaming-store only for a separate stream/Node path whose direct selector calls should return Kefir observables.
Do not import React selector internals from src/* or utils/react-selectors/*.

import { ReactStore } from "@augmentcode/themis/react-store";

export const reactStore = new ReactStore({ todos: todosReducer });
const dispose = reactStore.init();

Lifecycle rules

Construct ReactStore with app-owned reducers and optional middleware, then call reactStore.init(initialState?) before invoking direct selector calls or .useValue(...args).
React selector calls return Preact React signal outputs backed by the Store-owned state stream after initialization and throw before init() or after dispose().
Keep app shared/domain state in reducers and ReactStore selectors rather than module-level shared Preact signals.
reactStore.dispatch, reactStore.state, reactStore.runSaga(sagaFn), and reactStore.dispose() follow the shared Store runtime behavior documented in core Store guidance.
Do not manually register package-owned @internal_ reducers or internal sagas.

Verification cues

Imports use @augmentcode/themis/react-store for ReactStore.
React examples initialize the Store before signal selector reads.
The app path does not mix Svelte readable or Kefir observable Store setup.

이 저장소의 다른 Skills

같은 저장소

core-debugging

augmentcode/themis

Inspect runtime state via window.svelteRedux.reduxContext after Store.initDevTool() exposes an initialized Store instance. Multiple exposed stores produce a reduxContext array and a console.error. Use reducer tests for reference-equality diagnostics. Public Store API: @augmentcode/themis/svelte-store; devtools registration is package-internal implementation context.

2026-07-140

core-file-structure

augmentcode/themis

Per-slice directory layout ({name}-types.ts, {name}-slice.ts, {name}-selectors.ts, sagas/{name}-saga.ts plus tests). Saga-only slices skip reducer registration. Register reducers in the Store constructor map; store.init() wires the Redux store and package saga manager but does NOT auto-start app sagas — start each one explicitly via store.runSaga(sagaFn). Do not manually register package @internal_ sagas. Ownership: exactly one {name}-slice.ts and one {name}-selectors.ts module per slice directory; split multiple slices into separate directories. Naming: {Feature}State, {feature}Reducer, camelCase slice identity keys/namespaces, verb-phrase actions, select* prefix, "sliceName/actionName" action types.

2026-07-140

core

augmentcode/themis

Root routing index for framework-independent Redux and redux-saga guidance in themis. Use for canonical Redux state policy, action/reducer primitives, normalized state helpers, typed-redux-saga patterns, saga manager behavior, saga channel/effect helpers, explicit store pruning, serialization, testing, debugging, and verifier handoff. Use the selected Store family skill for framework-specific Store selector/component behavior, choosing only one concrete Store family per app.

2026-07-140

react-component-integration

augmentcode/themis

ReactStore component integration guidance for React app/root wiring. Covers where to create/configure ReactStore, init/dispose ownership, app saga startup with reactStore.runSaga(sagaFn), direct selector signal reads in JSX/TSX, Babel transform/useSignals tracking, selector .useValue(...args) fallbacks for hook/plain-value boundaries, and Store-first dispatch without Svelte or StreamingStore lifecycle rules.

2026-07-140

react-selector-lifecycle

augmentcode/themis

React selector lifecycle and call-mode guidance. Maps direct calls that return Preact React signals as the preferred React consumer path, .useValue(...args) for necessary hook/plain-value fallback paths, Babel transform/useSignals tracking, .select(state, ...args) for handlers/tests/composition, .effect(...args) for sagas, and .withStore(...) for explicit binding without Svelte lifecycle rules.

2026-07-140

react-selector-scheduling

augmentcode/themis

ReactStore selector emission scheduling guidance. Use for Store-owned coalescing of preferred direct ReadonlySignal outputs and .useValue(...args) fallback reads, throttledSelectorFrequency tuning, package-private scheduler boundaries, and avoiding manual debounce/wrapper subscriptions or audit-log misuse.

2026-07-140

name	react/store
description	ReactStore import, initialization, disposal, and Store-runtime guidance for the React signal Store variant. Use for @augmentcode/themis/react-store, inherited runSaga/dispatch/state behavior, and contrast with Svelte-readable Store or StreamingStore without teaching those call modes.
type	sub-skill
requires	["react","core/import-boundaries"]
sources	["@augmentcode/themis/react-store","augmentcode/themis:docs/ARCHITECTURE.md","augmentcode/themis:README.md"]
triggers	["ReactStore","react-store import","Store state lifecycle","signal Store"]

ReactStore import and lifecycle

Use this skill when a task needs the React signal Store variant. For shared state policy, reducers, actions, sagas, and package import boundaries, also follow the matching core/* skills.

Correct import and class choice

Use ReactStore from @augmentcode/themis/react-store.
Use Store from @augmentcode/themis/svelte-store only for a separate Svelte app whose direct selector calls should return Svelte readables.
Use StreamingStore from @augmentcode/themis/streaming-store only for a separate stream/Node path whose direct selector calls should return Kefir observables.
Do not import React selector internals from src/* or utils/react-selectors/*.

import { ReactStore } from "@augmentcode/themis/react-store";

export const reactStore = new ReactStore({ todos: todosReducer });
const dispose = reactStore.init();

Lifecycle rules

Construct ReactStore with app-owned reducers and optional middleware, then call reactStore.init(initialState?) before invoking direct selector calls or .useValue(...args).
React selector calls return Preact React signal outputs backed by the Store-owned state stream after initialization and throw before init() or after dispose().
Keep app shared/domain state in reducers and ReactStore selectors rather than module-level shared Preact signals.
reactStore.dispatch, reactStore.state, reactStore.runSaga(sagaFn), and reactStore.dispose() follow the shared Store runtime behavior documented in core Store guidance.
Do not manually register package-owned @internal_ reducers or internal sagas.

Verification cues

Imports use @augmentcode/themis/react-store for ReactStore.
React examples initialize the Store before signal selector reads.
The app path does not mix Svelte readable or Kefir observable Store setup.