# vuex-redux

> Make Redux as simple as Vuex

Latest version **0.1.9** (published 2020-03-08) · MIT license · 0 weekly downloads

## Install

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

## 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.1.9 |
| Published | 2020-03-08 |
| First published | 2020-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 85.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | qinjialei |
| Maintainers | qinjialei |
| Keywords | redux, vuex |

## Links

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

## Dependencies (9)

- [immer](https://npm.io/package/immer.md) ^5.3.6
- [rollup](https://npm.io/package/rollup.md) ^2.0.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.8.7
- [rollup-plugin-json](https://npm.io/package/rollup-plugin-json.md) ^4.0.0
- [rollup-plugin-babel](https://npm.io/package/rollup-plugin-babel.md) ^4.4.0
- [rollup-plugin-uglify](https://npm.io/package/rollup-plugin-uglify.md) ^6.0.4
- [rollup-plugin-replace](https://npm.io/package/rollup-plugin-replace.md) ^2.2.0
- [rollup-plugin-commonjs](https://npm.io/package/rollup-plugin-commonjs.md) ^10.1.0
- [rollup-plugin-node-resolve](https://npm.io/package/rollup-plugin-node-resolve.md) ^5.2.0

## Recent versions

- 0.1.9 (latest) — 2020-03-08
- 0.1.8 — 2020-03-08
- 0.1.7 — 2020-03-08
- 0.1.6 — 2020-03-08
- 0.1.5 — 2020-03-08
- 0.1.4 — 2020-03-08
- 0.1.3 — 2020-03-08
- 0.1.2 — 2020-03-08
- 0.1.1 — 2020-03-08
- 0.1.0 — 2020-03-08

## README

## 轻量级的 Redux 封装
## Make Redux as simple as Vuex

[示例项目](https://github.com/qinjialei24/vuex-redux/tree/master/demo)

## 使用
>1. 目录结构(使用`modules`来拆分各个`reducer`，参照`vuex module`
>2. 不需要手动编写`action`
>3. 提供`namespace`，参照` vuex namespace`
>4. 内置 `immer`，以`mutable`方式去操作`state`

## 目录结构
- modules
  - todo.js
  - counter.js
- index.js

> modules / counter.js

```js
import { createModel } from "vuex-redux";

const model = {
  namespace: 'counter',
  state: {
    count: 10
  },
  reducer: {
    add(state, action) {
      state.count += 1
    },
    minus(state, action) {
      state.count--
    },
  }
}

export default createModel(model)
```
> modules / todo.js
```js
import { createModel } from "vuex-redux";

const model = {
  namespace: 'todo',
  state: {
    todoList: []
  },
  reducer: {
    addTodo(state, action) {
      state.todoList.push(action.data)
    },
    delete(state, action) {
      state.todoList.splice(action.data, 1)
    },
  },
}

export default createModel(model)
```

>index.js
```js
import { createStore, combineReducers, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import { setActionToStore, storeEnhancer } from "vuex-redux";

import todo from "./modules/todo";
import counter from "./modules/counter";

const loggerMiddleware = store => dispatch => action => {
  console.log("action", action)
  dispatch(action)
}

const reducerModules = {
  todo,
  counter,
}


const store = createStore(combineReducers(reducerModules), composeWithDevTools(
  applyMiddleware(loggerMiddleware),
  storeEnhancer
  // other store enhancers if any
));

setActionToStore(store, reducerModules)
export default store
```
> 组件这样使用
```js
// dispatch 支持两种使用方式
// 原生redux调用： dispatch({type:'add',payload:{}})
// 类似vuex调用： dispatch('add',payload)

// 调用 counter 的 add
dispatch(store.counter.add)
dispatch({ //类似 vuex调用
  type:store.counter.add,
})

// 调用 todo 的 delete
dispatch(store.counter.add,{})
dispatch({//类似 vuex调用
  type:store.counter.delete,
  payload:{}
})
```

## 对比传统的`redux`使用方式
>目录结构

- action.js
- reducer
  - todo.js
  - counter.js
- index.js
- CounterComponent.js

> action.js

```js
export const ADD = 'add'
export const MINUS = 'minus'
export const ADD_TODO = 'addTodo'
```

> reducer / todo.js

```js
import { ADD_TODO } from './action.js'

export function todoReducer(state = { todoList:[] }, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todoList:state.todoList.push(action.payload)
      }
    default:
      return state
  }
}
```


> reducer / counter.js
```js
import { ADD, MINUS } from './action.js'
export function counterReducer(state = { count:0 }, action) {
  switch (action.type) {
    case ADD:
      return {
        ...state,
        count:state.count + 1
      }
    case MINUS:
       return {
        ...state,
        count:state.count - 1
      }
    default:
      return state
  }
}
```

>index.js
```js
import { createStore, combineReducers, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import todo from "./reducer/todo.js";
import counter from "./reducer/counter.js";

const reducerModules = {
  todo,
  counter,
}

const loggerMiddleware = store => dispatch => action => {
  console.log('loggerMiddleware')
  dispatch(action)
}


const store = createStore(combineReducers(reducerModules), composeWithDevTools( // use redux-devtools
  applyMiddleware(loggerMiddleware),
  // other store enhancers if any
));

export default store
```

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