Redux

作者 vercel-labsfc2a696a50a3无许可证18K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库昨天更新

Redux adapter for json-render's StateStore interface. Use when integrating json-render with Redux or Redux Toolkit for state management via @json-render/redux.

精选仅含说明Software Development

AI 生成的概览

通过 @json-render/redux 适配器，把 Redux 或 Redux Toolkit store 接入 json-render 的 StateStore 接口。

功能: 该技能说明如何将 Redux store（或 Redux Toolkit slice）作为 json-render 的状态后端接入。内容包括安装 @json-render/redux、@json-render/core、@json-render/react 与 Redux 相关包，定义用于 json-render 状态的 slice，创建 store，并用 reduxStateStore 构建适配器。文档还说明了适配器的 store、selector 和 dispatch 选项。
适用场景: 适用于将 json-render 与 Redux 或 Redux Toolkit 集成以进行状态管理的场景。适合已经使用 Redux、并希望 json-render 的读写都经过 Redux 的项目。
运行要求: 需要 Node.js 与 npm，用于安装 @json-render/redux、@json-render/core、@json-render/react 以及 redux 或 @reduxjs/toolkit。该技能不附带脚本，仅为说明文档。

@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

bash

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

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

tsx

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 stateconst uiSlice = createSlice({  name: "ui",  initialState: { count: 0 } as Record<string, unknown>,  reducers: {    replaceUiState: (_state, action) => action.payload,  },});
// 2. Create the Redux storeconst reduxStore = configureStore({  reducer: { ui: uiSlice.reducer },});
// 3. Create the json-render StateStore adapterconst 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>

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 stateconst uiSlice = createSlice({  name: "ui",  initialState: { count: 0 } as Record<string, unknown>,  reducers: {    replaceUiState: (_state, action) => action.payload,  },});
// 2. Create the Redux storeconst reduxStore = configureStore({  reducer: { ui: uiSlice.reducer },});
// 3. Create the json-render StateStore adapterconst 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.

来源与署名

来源：vercel-labs/json-render位于skills/redux提交fc2a696

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Redux

@json-render/redux

Installation

Usage

API

`reduxStateStore(options)`

来源与署名

更多来自 vercel-labs/json-render 的技能

Remotion

Zustand

Svelte

Xstate

Solid

Vue

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices