Redux

This is a bridge adapter that lets you use Redux or Redux Toolkit as the state backend for json-render's declarative UI system. You pass in your Redux store, a selector to pick which slice holds your json-render state, and a dispatch function to update it. The adapter implements json-render's StateStore interface so components can read and write state without knowing Redux is underneath. It's useful if you're already committed to Redux for global state management but want to drive dynamic UI from JSON configs. The setup is straightforward but does require a dedicated slice and a bit of wiring boilerplate to connect the two worlds.

skills.sh installs: 1.1K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill redux --agent claude-code

Installs into .claude/skills of the current project.

Files

@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)),
});

SKILL.md on GitHub