# soul-react-redux

> 安装soul-react-redux

Latest version **1.0.4** (published 2023-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install soul-react-redux
pnpm add soul-react-redux
yarn add soul-react-redux
bun add soul-react-redux
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-08-10 |
| First published | 2023-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | lhc-soul |

## Links

- npm: https://www.npmjs.com/package/soul-react-redux
- npm.io page: https://npm.io/package/soul-react-redux

## Dependencies (3)

- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [redux](https://npm.io/package/redux.md) ^4.2.1
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.4.2

## Recent versions

- 1.0.4 (latest) — 2023-08-10

## README

安装soul-react-redux

```
npm i -S soul-react-redux
```



在项目中使用

```javascript
import { createStore } from "soul-react-redux"

//创建命名为app的状态管理模块
const app = {
    index:1
}

//创建命名为task的状态管理模块
const task = {
    count:100
}

const root_store = {
    task,
    app
}


//每创建一个状态管理模块，都会同时生成一个状态管理模块拼接_unique的一个变量返回，如app_unique，task_unique等等，可以使用这个唯一值去更新对应的状态管理模块
export const {
    store,
    app_unique,
    task_unique,
} = createStore(root_store)
```



在根文件中引入

```react
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'
import { store } from "./store";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={ store }>
        <App />
    </Provider>
);

reportWebVitals();
```



在函数App组件中使用

```react
import { useSelector, useDispatch } from 'react-redux'
import { app_unique } from "./store";
import Demo from "./Demo";

const App = () => {

  const app = useSelector((state) => {
    return state.app
  })

  const task = useSelector((state) => {
    return state.task
  })

  const dispatch = useDispatch()

  const handleAdd = () => {
    const index = app.index + 1
    
    // 更新app状态管理模块的值，此处的更新逻辑是{ ...old_state,...new_state }
    dispatch({ type: app_unique,data:{ index } }) 
  }

  return <div className="App">
    <button onClick={ handleAdd }>
      测试
    </button>
    <div>
      { app.index }
    </div>
    <div>
      { task.count }
    </div>
    <Demo></Demo>
  </div>
}

export default App;
```



在类组件Demo中使用

```react
import React, {Component} from 'react';
import { store, task_unique} from "./store";

class Demo extends Component {
    constructor(props) {
        super(props);
        this.dispatch = null
        this.app = {}
        this.task = {}
        this.getStoreState()
        const { subscribe } = store
        subscribe(()=>{
            this.getStoreState()
        })
    }

    getStoreState(){
        this.dispatch = store.dispatch
        const { app,task } = store.getState()
        this.app = app
        this.task = task
    }

    handleAdd(){
        const count = this.task.count + 10
        store.dispatch({ type: task_unique,data:{ count } })
    }

    render() {
        return (
            <div>
                <button onClick={ ()=>{ this.handleAdd() } }> 添加 </button>
                <div>{ this.app.index }</div>
                <div>{ this.task.count }</div>
            </div>
        );
    }
}

export default Demo
```

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