# rns-pure

> react state management. support react 15.x, 16.x, anujs

Latest version **2.4.3** (published 2020-03-06) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install rns-pure
pnpm add rns-pure
yarn add rns-pure
bun add rns-pure
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.4.3 |
| Published | 2020-03-06 |
| First published | 2019-10-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 353.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | empty916 |
| Maintainers | empty916 |
| Keywords | react, redux, mobx, state, store, data, anujs |

## Links

- npm: https://www.npmjs.com/package/rns-pure
- Repository: https://github.com/empty916/natur
- Homepage: https://github.com/empty916/natur/tree/2.x
- Issues: https://github.com/empty916/natur/issues
- npm.io page: https://npm.io/package/rns-pure

## Dependencies (1)

- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.0

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 2.4.3 (latest) — 2020-03-06
- 2.4.2 — 2020-03-01
- 2.4.1 — 2020-03-01
- 2.4.0 — 2020-02-08
- 2.3.0 — 2020-01-14
- 2.2.9 — 2020-01-14
- 2.2.8 — 2020-01-12
- 2.2.7 — 2020-01-12
- 2.1.7 — 2019-11-20
- 2.1.6 — 2019-11-13
- 2.1.5 — 2019-11-06
- 2.0.4 — 2019-11-06
- 2.0.3 — 2019-11-05
- 2.0.2 — 2019-10-29
- 2.0.1 — 2019-10-28
- … 1 more at https://npm.io/package/rns-pure/versions

## README

# rns-pure 使用手册

[English doc](https://github.com/empty916/natur/blob/2.x/doc/README.en.md)

### [此包已经迁移到natur](https://www.npmjs.com/package/natur)

#### 这是[react-natural-store](https://www.npmjs.com/package/react-natural-store)的纯净版。

#### rns-pure与react-natural-store的区别如下：

- state本身不限制数据类型
- maps必须是手动声明依赖
- actions返回任意值都可以作为state的值，不做任何拦截
- 不自动附带异步支持，不自动附带浅比较state更新优化
- middlewares.js中附带了常用的中间件，包括异步中间件，浅层对比state优化中间件等
- rns-pure不会自动收集依赖，所以不限制actions对state的修改，但是必须遵守immutable规范
- 因为rns-pure没有使用Object.defineProperty API所以可以支持IE低版本浏览器
- 因为没有了Object.defineProperty拦截，所以会出现以下情况

```ts
/*
  app: {
    state: {
      name: 'tom'
    },
    actions: {
      updateName: () => ({name: 'jerry'}),
    }
  }
*/

const App = () => {
  const [{state, actions}] = useInject('app');
  // 调用action
  const newState = actions.updateName();
  // 旧的state无法直接获取到最新的state值
  // state.name === 'tom'
  // newState.name === 'jerry'
  // ...
}


```

- 因为运行时闭包问题，拿不到最新state，新增thunkMiddleware

```typescript

import { thunkMiddleware } from 'rns-pure/dist/middlewares'

const actionExample = (myParams: any) => (getState, setState: (s: State) => State, getMaps: () => InjectMaps) => {
    const currentState = getState(); // 最新的state
    const currentMaps = getMaps(); // 最新的maps
    setState(currentState); // 更新state
}
```
- devtool

```typescript

// redux.devtool.middleware.ts
import { Middleware } from 'rns-pure';
import { createStore } from 'redux';

const root = (state: Object = {}, actions: any):Object => ({
	...state,
	...actions.state,
});

const createMiddleware = ():Middleware => {
	if (process.env.NODE_ENV === 'development' && (window as any).__REDUX_DEVTOOLS_EXTENSION__) {
		const devMiddleware = (window as any).__REDUX_DEVTOOLS_EXTENSION__();
		const store = createStore(root, devMiddleware);
		return () => next => record => {
			store.dispatch({
				type: `${record.moduleName}/${record.actionName}`,
				state: {
					[record.moduleName]: record.state,
				},
			});
			next(record);
		}
	}
	return () => next => record => next(record);
}

export default createMiddleware();


```

- 推荐的中间件配置

```typescript

import {createStore} from 'rns-pure';
import { promiseMiddleware, shallowEqualMiddleware, thunkMiddleware } from 'rns-pure/dist/middlewares';
import devTool from 'redux.devtool.middleware';

const store = createStore(
	modules,
    {},
	undefined,
	[
		thunkMiddleware,
		promiseMiddleware,
		shallowEqualMiddleware,
		devTool,
	],
);
```

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