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