{"library":"reapex","title":"Reapex","description":"Reapex is a JavaScript framework designed for building scalable React applications, with a particular focus on micro-frontend architectures and robust state management. It is currently at version 1.1.1 and appears to be actively maintained, though a specific release cadence isn't explicitly stated. Key differentiators include its plugin system (e.g., for Immer integration), flexible state model supporting both immutable records and plain JavaScript objects, and built-in support for integrating with Redux Sagas for complex side effects. The framework abstracts away much of the boilerplate associated with Redux-like patterns, aiming to simplify state management and modular development in larger applications. Its design enables developers to extend its core functionality through plugins, adapting it to various architectural needs.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install reapex"],"cli":null},"imports":["import { createApp } from 'reapex'","import { createModel } from 'reapex'","import { useModel } from 'reapex'","import type { App } from 'reapex'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createApp, createModel, useModel } from 'reapex';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n// 1. Create a Reapex App instance\nconst app = createApp();\n\n// 2. Define a Model\nconst counterModel = createModel({\n  name: 'counter',\n  state: { value: 0 },\n  reducers: {\n    increment: (state) => ({ ...state, value: state.value + 1 }),\n    decrement: (state) => ({ ...state, value: state.value - 1 }),\n    set: (state, payload: number) => ({ ...state, value: payload }),\n  },\n  effects: {\n    *incrementAsync() {\n      yield new Promise(resolve => setTimeout(resolve, 1000));\n      yield counterModel.reducers.increment();\n    },\n  },\n});\n\n// 3. Register the model with the app\napp.model(counterModel);\n\n// 4. Create a React component to consume the model\nconst CounterComponent = () => {\n  const [state, actions] = useModel(counterModel);\n\n  return (\n    <div>\n      <h1>Counter: {state.value}</h1>\n      <button onClick={actions.increment}>Increment</button>\n      <button onClick={actions.decrement}>Decrement</button>\n      <button onClick={() => actions.incrementAsync()}>Increment Async</button>\n      <button onClick={() => actions.set(0)}>Reset</button>\n    </div>\n  );\n};\n\n// 5. Mount the application\nReactDOM.render(\n  <React.StrictMode>\n    <CounterComponent />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n","lang":"typescript","description":"This quickstart demonstrates how to set up a Reapex application, define a state model with reducers and effects (Sagas), and consume it within a React component using the `useModel` hook.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}