# dva-state

> 轻量级dva数据流实现

Latest version **0.0.1** (published 2023-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install dva-state
pnpm add dva-state
yarn add dva-state
bun add dva-state
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-12-16 |
| First published | 2023-12-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 363 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | qiutian00 |
| Maintainers | qiutian00 |
| Keywords | redux, dva |

## Links

- npm: https://www.npmjs.com/package/dva-state
- Repository: https://github.com/qiutian00/dva-model
- Homepage: https://github.com/qiutian00/dva-model#readme
- Issues: https://github.com/qiutian00/dva-model/issues
- npm.io page: https://npm.io/package/dva-state

## Dependencies (3)

- [redux](https://npm.io/package/redux.md) ^4.0.5
- [redux-saga](https://npm.io/package/redux-saga.md) ^1.1.3
- [react-redux](https://npm.io/package/react-redux.md) ^7.1.3

## Recent versions

- 0.0.1 (latest) — 2023-12-16

## README

# dva-state
轻量级dva数据流实现
## Usage

```
npm install dva-state --save
```

## api基本和dva一样，只实现了数据流部分，仅120行左右代码
## 支持initialState、onStateChange、onError钩子
index.js
```
import React, { useState, useEffect } from 'react';
import { Alert } from 'react-native';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'react-native-elements';
import { MenuProvider } from 'react-native-popup-menu';
import App from './App';
import theme from './config/theme';
import Loading from './components/loading';
import DeviceStorage from './utils/storgae';
import WRedux from './redux';
import app from './models/app';
import note from './models/note';

const AppRoot = () => {
  const [store, setStore] = useState(null);
  useEffect(() => {
    DeviceStorage.get('appState', {}).then(initialState => {
      const models = [app, note];
      const onError = ({ e, action, namespace }) =>
        Alert.alert(
          '系统错误',
          `namespace: ${namespace}\nactionType: ${action.type}\nmessage: ${e.message}\nstack: ${e.stack}`
        );
      const onStateChange = ({ stateChanged, namespace, stateBefore }) => {
        const model = models.find(v => v.namespace === namespace);
        let { storeFields } = model;
        storeFields = storeFields ? (storeFields === 'all' ? Object.keys(stateChanged) : storeFields) : [];
        const stateNeedStore = {};
        storeFields.forEach(key => {
          stateNeedStore[key] = stateChanged[key];
        });
        DeviceStorage.update('appState', { [namespace]: stateNeedStore });
      };
      const wApp = WRedux(models, { initialState, onError, onStateChange });
      const store = wApp.run();
      global.store = store;
      setStore(store);
    });
  }, []);
  return store ? (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <MenuProvider backHandler>
          <App />
        </MenuProvider>
      </ThemeProvider>
    </Provider>
  ) : (
    <Loading />
  );
};

export default AppRoot;
```

```
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./global";
import "./global.scss";
import App from "./App";
import WRedux from "dva-wyj";
import toDoList from "./models/toDoList";

const models = [toDoList];
const wApp = WRedux(models);
const store = wApp.run();
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
```
示例model
```
import { delay } from "redux-saga";
export default {
  namespace: "toDoList",
  state: {
    sagaTab: "Everything",
    list: [
      { text: "test1", time: "2018-12-06 09:39:17", completed: false },
      { text: "test2", time: "2018-12-07 09:39:17", completed: false },
      { text: "test3", time: "2018-12-08 09:39:17", completed: true },
      { text: "test4", time: "2018-12-09 09:39:17", completed: true },
      { text: "test5", time: "2018-12-10 09:39:17", completed: false }
    ]
  },
  effects: {
    *sagaTest({ put, select }, { payload }) {
      let { list } = yield select(state => state.toDoList);
      yield delay(2000);
      list.push(payload.item);
      yield put({ type: "toDoList/save", payload: { list } });
      return "sagareturnvalue";
    }
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    }
  }
};

```

## reference
[redux-saga](https://github.com/redux-saga/redux-saga/tree/main)

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