# @fekit/react-store

> react 数据中心 redux + redux-saga 分模块封装，用以简化 redux 配置与使用成本。

Latest version **1.0.0** (published 2022-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fekit/react-store
pnpm add @fekit/react-store
yarn add @fekit/react-store
bun add @fekit/react-store
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-12-11 |
| First published | 2021-12-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 93.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xiaojunbo |
| Maintainers | liliguo, xiaojunbo |

## Links

- npm: https://www.npmjs.com/package/@fekit/react-store
- npm.io page: https://npm.io/package/@fekit/react-store

## Dependencies (3)

- [redux](https://npm.io/package/redux.md) ^4.2.0
- [redux-saga](https://npm.io/package/redux-saga.md) ^1.2.2
- [react-redux](https://npm.io/package/react-redux.md) ^8.0.5

## Recent versions

- 1.0.0 (latest) — 2022-12-11
- 0.3.2 — 2022-12-11
- 0.3.1 — 2022-08-18
- 0.3.0 — 2022-07-11
- 0.2.10 — 2022-07-05
- 0.2.9 — 2022-07-05
- 0.2.8 — 2022-06-29
- 0.2.7 — 2022-06-29
- 0.2.6 — 2022-06-29
- 0.2.5 — 2022-05-03
- 0.2.4 — 2022-05-03
- 0.2.3 — 2021-12-11
- 0.1.3 — 2021-12-02
- 0.1.2 — 2021-12-02

## README

# @fekit/react-store

react 数据中心 redux + redux-saga 分模块封装，用以简化 redux 配置与使用成本。

## 安装

```
yarn add @fekit/react-store
```

或

```
npm i @fekit/react-store
```

## 引入

1､安装本插件后，在项目目录中新建 actions 文件

```
├── public
├── src
│   ├── actions
│   │   ├── index.ts
│   │   ├── module1.ts
│   │   ├── module2.ts
│   │   └── ...
│   └── ...
└── ...
```

2､ 在 index.ts 中导入所有模块

```typescript
import * as home from './home';
import * as demo from './demo';

const actions: any = {
  home,
  demo,
};

export default actions;
```

3､在 react 项目入口文件中使用 store

```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import actions from './actions';
import store from '@fekit/react-store';
import Root from './root';

ReactDOM.render(
  <Provider store={store(actions)}>
    <Root />
  </Provider>,
  document.getElementById('root')
);
```

## 使用

1､插件提供了一个万能方法可以直接操作数据中心，比如想给 home 模块数据中存入 test=1 的数据即如下所示。

```typescript
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { LayerView } from '@fekit/react-layer';

const store = ({ home }: any) => ({ home });
const event = (dispatch: any) => {
  return {
    test() {
      // 万能方法 $
      dispatch({
        type: '$',
        data: {
          key: 'home.test',
          val: 1,
        },
      });
      // 无限层级
      dispatch({
        type: '$',
        data: {
          key: 'home.aaa.bbb.ddd.eee.fff',
          val: 1,
        },
      });

      // 数据是否合并？ 默认替换，开启后将合并新老数据   {aaa:1} => {aaa:1,bbb:2}
      dispatch({
        type: '$',
        data: {
          key: 'home.aaa',
          val: { b: 2 },
          merge: true, // 默认直接替换 {aaa:{a:1}} => {aaa:{b:2}}    开启合并后  {aaa:{a:1}} => {aaa:{a:1,b:2}}
        },
      });
    },
  };
};
function Home(props: any) {
  const { home, test } = props;
  consoe.log(home); // -> {test: 1, aaa: { bbb: { ddd: { eee: { fff: 1 } } } } }
  useEffect(() => {
    test();
    return () => {};
  }, [test]);

  return (
    <div className="home">
      <h1>HOME</h1>
    </div>
  );
}

export default connect(store, event)(Home);
```

2､ 普通用法

```typescript
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { LayerView } from '@fekit/react-layer';
import { HOME_GET_DATA } from '../actions/home';

const store = ({ home }: any) => ({ home });
const event = (dispatch: any) => {
  return {
    getData() {
      dispatch({
        type: HOME_GET_DATA.name,
        data: {}, // 传参需要时使用
      });
    },
  };
};
function Home(props: any) {
  const { home, getData } = props;
  useEffect(() => {
    getData();
    return () => {};
  }, [getData]);

  return (
    <div className="home">
      <h1>HOME</h1>
    </div>
  );
}

export default connect(store, event)(Home);
```

## 版本
```
0.3.0
万能方法 $ 添加 fun='set|del' 功能，set为原先功能，del是删除指定元素
```

```
0.2.3
万能方法 $ 添加合并功能，在data中开启合并 { merge: true } 可以合并新老数据，而默认是新数据替换老数据。
```

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