# service-redux

> A state management tool using rxjs

Latest version **1.1.2** (published 2020-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install service-redux
pnpm add service-redux
yarn add service-redux
bun add service-redux
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2020-07-13 |
| First published | 2020-07-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | zhangzhongming |
| Maintainers | zhangzhongming |
| Keywords | rxjs, redux, service |

## Links

- npm: https://www.npmjs.com/package/service-redux
- Repository: https://github.com/810307015/myNpm
- Homepage: https://github.com/810307015/myNpm#readme
- Issues: https://github.com/810307015/myNpm/issues
- npm.io page: https://npm.io/package/service-redux

## Dependencies (1)

- [rxjs](https://npm.io/package/rxjs.md) ^6.6.0

## Recent versions

- 1.1.2 (latest) — 2020-07-13
- 1.1.1 — 2020-07-13
- 1.1.0 — 2020-07-13
- 1.0.9 — 2020-07-13
- 1.0.8 — 2020-07-13
- 1.0.7 — 2020-07-13
- 1.0.6 — 2020-07-13
- 1.0.5 — 2020-07-13
- 1.0.4 — 2020-07-13
- 1.0.3 — 2020-07-13
- 1.0.2 — 2020-07-13
- 1.0.1 — 2020-07-13
- 1.0.0 — 2020-07-13

## README

### 安装

- `npm i service-redux --save`

### 简要说明

- 使用`rxjs`实现了一个简单的类似`redux`的功能，实现了全局的状态共享。

### 使用

- 建一个service服务。

```JSX
import { Service, wrapService } from 'service-redux';

/***
 * Service内置了subscribe，set，next三个方法。
 * subscribe(callback)，订阅数据，每次有数据的时候会触发传入的回调，订阅之后默认调用一次next方法，把当前数据流推送给订阅者
 * set(data)，更新数据并触发当前所有的subscribe，set中会调用next方法
 * next(data)，触发当前所有的subscribe
 */

class TestService extends Service {

  constructor(props) {
    super(props);
  }

  add = (data) => {
    this.data.count = Number(data.count) + Number(this.data.count);
    this.next(this.data);
  }
}

const initData = {
  count: 0,
  test1: 'Hello',
  test2: 'World'
};

export default wrapService(TestService, initData)();
```

- 在页面的入口页，使用provider进行包裹，并将所有的service传入Provider。

```JSX
import { ServiceProvider } from 'service-redux';
import testService from 'src/services/TestService';

ReactDOM.render(
  // services是一个服务对象，泪如{ aService: aService, bService: bService }
  // 所以建议将所有的service对象放到一个文件中通过export导出，然后import * as services from 'services/index'，就可以直接传入
  <ServiceProvider services={{ testService: testService }}>
    // 你需要渲染的主体内容
  </ServiceProvider>
  ,
  document.getElementById("root")
);
```

- 在需要使用的页面，使用inject将需要的全局状态和服务进行注入

```JSX
import React, { Component } from 'react';

import { inject } from 'service-redux';

class Subscribe extends Component {
  
  add = () => {
    const { testService } = this.props;
    testService.add({
      count: Number(this.input.value)
    })
  }

  render() {
    const { count } = this.props;
    return (
      <div className="Test">
        <input type="number" ref={input => this.input = input} />
        <div className="add" onClick={this.add}>增加</div>
        <div className="show">{count}</div>
      </div>
    )
  }
}

// 使用该方法，选择自己需要的props属性
const mapStateToProps = (data) => {
  const {
    count,
    testService
  } = data;

  return {
    count,
    testService
  }
}

export default inject(mapStateToProps)(Subscribe);
```

---
_Source: https://npm.io/package/service-redux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._