# @edsilv/stencil-redux 中文文档

规范地址：https://npmcn.com/package/%40edsilv/stencil-redux/

版本：0\.1\.2
npm 元数据更新时间：2022-04-05T06:43:11.211Z
中文译文更新时间：2026-11-13T07:22:27.140Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40edsilv/stencil-redux
原文对照：https://npmcn.com/package/%40edsilv/stencil-redux/?lang=original
项目主页：https://github.com/ionic-team/stencil-redux
源码仓库：https://github.com/ionic-team/stencil-redux

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：544 kB，58 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：redux ^4\.0\.1
- 首次发布：2019-08-21T12:27:57.261Z
- 最新版本发布：2020-05-21T10:18:42.490Z
- 近 30 天下载量：11531（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

Stencil Redux - 用于 Stencil 所建网络组件的简单redux连接器

## 安装

```sh
npm install @edsilv/stencil-redux
```

也可以使用：`pnpm add @edsilv/stencil-redux`、`yarn add @edsilv/stencil-redux`、`bun add @edsilv/stencil-redux`

## README

## Stencil Redux 软件

由 Stencil 所建网络组件的简单再连接器 [`react-redux`](https://github.com/reduxjs/react-redux)。 。 。 .

## 安装

```
npm install @stencil/redux
npm install redux
```

## 使用量

Stencil Redux 使用的是 [`redux`](https://github.com/reduxjs/redux/) 下方的库。 设置商店并定义动作,还原器,选取器等,如果使用React with Redux,则应该为您所熟悉.

### 配置切除根器

```typescript
// redux/reducers.ts

import { combineReducers } from 'redux';

// Import feature reducers and state interfaces.
import { TodoState, todos } from './todos/reducers';

// This interface represents app state by nesting feature states.
export interface RootState {
  todos: TodoState;
}

// Combine feature reducers into a single root reducer
export const rootReducer = combineReducers({
  todos,
});
```

### 配置动作

```typescript
// redux/actions.ts

import { RootState } from './reducers';

// Import feature action interfaces
import { TodoAction } from './todos/actions';

// Export all feature actions for easier access.
export * from './todos/actions';

// Combine feature action interfaces into a base type. Use union types to
// combine feature interfaces.
// https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types
export type Action = (
  TodoAction
);
```

### 配置存储

```typescript
// redux/store.ts

import { Store, applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk'; // add-on you may want
import logger from 'redux-logger'; // add-on you may want

import { RootState, rootReducer } from './reducers';

export const store: Store<RootState> = createStore(rootReducer, applyMiddleware(thunk, logger));
```

### 在根组件中配置存储

```typescript

// components/my-app/my-app.tsx

import { Store } from '@stencil/redux';

import { Action } from '../../redux/actions';
import { RootState } from '../../redux/reducers';
import { store } from '../../redux/store';

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.scss'
})
export class MyApp {
  @Prop({ context: 'store' }) store: Store<RootState, Action>;

  componentWillLoad() {
    this.store.setStore(store);
  }
}
```

### 地图状态和发送到道具

时间轴: _说明_:因为所绘制的道具在技术上已经改变 _在内部_ 该部分, `mutable: true` 用于 `@Prop` 使用商店的定义。 见 [立体文档](https://stenciljs.com/docs/properties#prop-value-mutability) 为信息.

```typescript
// components/my-component/my-component.tsx

import { Store, Unsubscribe } from '@stencil/redux';

import { Action, changeName } from '../../redux/actions';
import { RootState } from '../../redux/reducers';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss'
})
export class MyComponent {
  @Prop({ context: 'store' }) store: Store<RootState, Action>;
  @Prop({ mutable: true }) name: string;

  changeName!: typeof changeName;

  unsubscribe!: Unsubscribe;

  componentWillLoad() {
    this.unsubscribe = this.store.mapStateToProps(this, state => {
      const { user: { name } } = state;
      return { name };
    });

    this.store.mapDispatchToProps(this, { changeName });
  }

  componentDidUnload() {
    this.unsubscribe();
  }

  doNameChange(newName: string) {
    this.changeName(newName);
  }
}
```

### 用法为 `redux-thunk`

一些Redux 中间软件,例如 `redux-thunk`改变商店的 `dispatch()` 函数,导致类型与您组件中的映射动作不匹配.

要正确输入您组件中映射的动作( 其值由 `store.mapDispatchToProps()`),可以使用以下类型:

```typescript
import { ThunkAction } from 'redux-thunk';

export type Unthunk<T> = T extends (...args: infer A) => ThunkAction<infer R, any, any, any>
  ? (...args: A) => R
  : T;
```

#### 示例

```typescript
// redux/user/actions.ts

import { ThunkAction } from 'redux-thunk';

export const changeName = (name: string): ThunkAction<Promise<void>, RootState, void, Action> => async (dispatch, getState) => {
  await fetch(...); // some async operation
};
```

在以下构成部分中 `this.changeName` 从动作类型中提取 `(name: string) => Promise<void>`。 。 。 .

```typescript
// components/my-component/my-component.tsx

import { changeName } from '../../redux/actions';

export class MyComponent {
  changeName!: Unthunk<typeof changeName>;

  componentWillLoad() {
    this.store.mapDispatchToProps(this, { changeName });
  }
}
```

## 常见问题

### @edsilv/stencil-redux 是什么？

Stencil Redux - 用于 Stencil 所建网络组件的简单redux连接器

### 如何安装 @edsilv/stencil-redux？

在项目目录运行 npm install @edsilv/stencil-redux，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：redux（^4\.0\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @edsilv/stencil-redux 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @edsilv/stencil-redux 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @edsilv/stencil-redux 可以商用吗？

@edsilv/stencil-redux 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @edsilv/stencil-redux 的下载量有多少？

根据 npm 官方下载统计，@edsilv/stencil-redux 在 2026/10/13 – 2026/11/11 这 30 天内被下载 11,531 次，日均约 384 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @edsilv/stencil-redux 还在维护吗？

最新版本 0\.1\.2 发布于 2020/05/21（6 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/08/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。