# @pushrdx/vuex-rx

> RxJS middleware for vuex

Latest version **0.2.0** (published 2017-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pushrdx/vuex-rx
pnpm add @pushrdx/vuex-rx
yarn add @pushrdx/vuex-rx
bun add @pushrdx/vuex-rx
```

## Health

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

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

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-09-20 |
| First published | 2017-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | lynweklm@gmail.com |
| Maintainers | pushrbx |
| Keywords | vue, vuex, RxJS, TypeScript, redux |

## Links

- npm: https://www.npmjs.com/package/@pushrdx/vuex-rx
- Repository: https://github.com/pushrbx/vuex-rx
- Homepage: https://github.com/pushrbx/vuex-rx#readme
- Issues: https://github.com/pushrbx/vuex-rx/issues
- npm.io page: https://npm.io/package/@pushrdx/vuex-rx

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.7.1

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2017-09-20
- 0.0.3 — 2017-08-09

## README

[![CircleCI](https://circleci.com/gh/Brooooooklyn/vuex-rx.svg?style=svg)](https://circleci.com/gh/Brooooooklyn/vuex-rx)
[![Coverage Status](https://coveralls.io/repos/github/Brooooooklyn/vuex-rx/badge.svg?branch=master)](https://coveralls.io/github/Brooooooklyn/vuex-rx?branch=master)
[![Dependency Status](https://david-dm.org/Brooooooklyn/vuex-rx.svg)](https://david-dm.org/Brooooooklyn/vuex-rx)
[![devDependencies Status](https://david-dm.org/Brooooooklyn/vuex-rx/dev-status.svg)](https://david-dm.org/Brooooooklyn/vuex-rx?type=dev)
# Vuex-Rx [WIP]

[![Greenkeeper badge](https://badges.greenkeeper.io/Brooooooklyn/vuex-rx.svg)](https://greenkeeper.io/)
Use Vuex + Vue + RxJS like React + Redux + React-redux + Redux-actons + redux-observable.

## Boilerplate
see [example](./examples)

index.vue:

```vue
<template>
  <p v-if="!reposByUser.length">loading...</p>
  <Repos v-else :repos="reposByUser" :user="user"></Repos>
</template>
<script src="./Repos.component.js"></script>
```

Repos.component.js:

```js
import { connect } from 'vuex-rx'
import { requestReposByUser } from './Repos.module'
import store from '../../store'
import Repos from '../../components/Repos'

const UserReposComponent = {

  data() {
    return {
      user: this.$router.currentRoute.params.user
    }
  },

  components: {
    Repos
  },

  created() {
    this.requestReposByUser(this.user)
  }
}

const mapStateToProps = ({ ui }) => {
  return ui.repos
}

export default connect(
  mapStateToProps,
  { requestReposByUser }
)(UserReposComponent, store)

```

Repos.module.js
```js
import { ajax } from 'rxjs/observable/dom/ajax'
import { Observable } from 'rxjs/Observable'
import { createAction, handleActions } from 'vuex-rx'

export const requestReposByUser = createAction('REQUEST_REPOS_BY_USERS')
const receviedReposByUser = createAction('RECEVIED_REPOS_BY_USERS')

const defaultState = {
  reposByUser: []
}

// reducer
export const reducer = handleActions({

  [receviedReposByUser]: (state, payload) => {
    return { ...state, reposByUser: payload }
  }

}, defaultState)

//epic

export const epic = action$ => action$
  .ofType(`${requestReposByUser}`)
  .map(action => action.payload)
  .switchMap(user =>
    ajax.getJSON(`https://api.github.com/users/${user}/repos`)
      .map(receviedReposByUser)
  )

```

## APIs

- createEpicMiddleware

  - param `store`

    type: `vuex store`

  - usage:
    [example](./examples/store/index.js)

- connect
  - param `mapStateToProps`

    (state: Store) => localState
  - param `mapMutationsToProps`

    type:
    ```ts
    {
      [key: string]: Action
    }
    ```
  - return `Connecter`

    - param `Component`

      type: `vue Object component`

    - param `Store`

      type: `vuex store`

  examples:

  ```js
  const componentA = {
    created() {
      this.requestUsers()
    }
  }

  const mapStateToProps = ({ ui }) => ({ ui.componentA })

  export default connect(mapStateToProps, { requestUsers })
  ```

- createAction
  - param `mutationName`

    type: `string`
  - return `vuexMutation`

- handleActions
  - param `actionMap`

    type:
    ```ts
    {
      [index: actionName]: (state: LocalState, payload) => LocalState
    }
    ```
    `LocalState` here is got from `mapStateToProps`
  - param `defaultState`

    type: `LocalState`

- combineReducer
- combineEpics

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