Redux Adapter for JSON Render
OfficialFreeIntegrate Redux with JSON Render's StateStore interface.
Free · Opens the source repo
What Redux Adapter for JSON Render does
The @json-render/redux skill provides a seamless integration between Redux and json-render's StateStore interface, allowing developers to manage application state effectively. This skill is particularly useful for those who are already utilizing Redux or Redux Toolkit for state management and want to leverage json-render for rendering components based on that state. By using this adapter, developers can ensure that their application's UI is always in sync with the underlying state managed by Redux.
To get started, install the necessary packages including @json-render/redux, @json-render/core, @json-render/react, and redux or @reduxjs/toolkit. The skill simplifies the process of creating a Redux store and connecting it to json-render by providing a straightforward API. Developers can define slices of state, create a Redux store, and then use the reduxStateStore function to connect their Redux store to json-render, allowing for efficient state management and rendering.
This skill is ideal for frontend developers who are building React applications that require robust state management. It allows them to utilize the powerful capabilities of Redux while taking advantage of json-render's efficient rendering of UI components. By following the provided usage example, developers can quickly set up their state management and rendering logic, leading to cleaner and more maintainable code.
In summary, the @json-render/redux skill is a valuable tool for developers looking to integrate Redux with json-render, enhancing their ability to manage application state and render components effectively. It streamlines the setup process and enables a more organized approach to state management in React applications.
When to use it
Use this skill when you need to connect a Redux store to json-render for managing UI state in a React application.
When not to use it
This skill is not suitable if you are not using Redux or json-render in your project.
What you can build with it
Integrating Redux with React
Use this skill to connect a Redux store with json-render in a React application, ensuring state is managed efficiently.
Managing UI State with Redux
Leverage the skill to manage UI state in applications that require complex state interactions, utilizing Redux's capabilities.
Streamlining State Management
Implement this skill to streamline state management in projects that already use Redux, enhancing code organization.
How to install Redux Adapter for JSON Render
View source1. Install with the skills CLI
npx skills add vercel-labs/json-render/redux --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by vercel-labs@json-render/redux
Redux adapter for json-render's StateStore interface. Wire a Redux store (or Redux Toolkit slice) as the state backend for json-render.
Installation
npm install @json-render/redux @json-render/core @json-render/react redux
# or with Redux Toolkit (recommended):
npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
Usage
import { configureStore, createSlice } from "@reduxjs/toolkit";
import { reduxStateStore } from "@json-render/redux";
import { StateProvider } from "@json-render/react";
// 1. Define a slice for json-render state
const uiSlice = createSlice({
name: "ui",
initialState: { count: 0 } as Record<string, unknown>,
reducers: {
replaceUiState: (_state, action) => action.payload,
},
});
// 2. Create the Redux store
const reduxStore = configureStore({
reducer: { ui: uiSlice.reducer },
});
// 3. Create the json-render StateStore adapter
const store = reduxStateStore({
store: reduxStore,
selector: (state) => state.ui,
dispatch: (next, s) => s.dispatch(uiSlice.actions.replaceUiState(next)),
});
// 4. Use it
<StateProvider store={store}>
{/* json-render reads/writes go through Redux */}
</StateProvider>
API
reduxStateStore(options)
Creates a StateStore backed by a Redux store.
| Option | Type | Required | Description |
|---|---|---|---|
store | Store | Yes | The Redux store instance |
selector | (state) => StateModel | Yes | Select the json-render slice from the Redux state tree. Use (s) => s if the entire state is the model. |
dispatch | (nextState, store) => void | Yes | Dispatch an action that replaces the selected slice with the next state |
The dispatch callback receives the full next state model and the Redux store.
Frequently asked questions about Redux Adapter for JSON Render
Similar skills
WinMD API Search
Easily find and explore Windows desktop APIs.
WebMCPify
Transform any web app into an agent-ready platform.
Phoenix Tracing
Instrument LLM applications with OpenInference tracing.
Foundry Hosted Agent CopilotKit
Guidance for developing agentic web apps on Azure.
Power Automate Foundation
Connect AI agents to Power Automate seamlessly.
Power Automate Flow Builder
Efficiently build and deploy Power Automate flows programmatically.