https://github.com/geut/mst-drama

A set of functions to work with the actions of mobx-state-tree
https://github.com/geut/mst-drama

actions mobx mobx-state-tree redux-devtools

Last synced: about 1 year ago
JSON representation

A set of functions to work with the actions of mobx-state-tree

• Host: GitHub
• URL: https://github.com/geut/mst-drama
• Owner: geut
• Created: 2017-12-20T21:21:14.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-12-23T16:49:59.000Z (over 8 years ago)
• Last Synced: 2025-03-24T12:11:31.207Z (about 1 year ago)
• Topics: actions, mobx, mobx-state-tree, redux-devtools
• Language: JavaScript
• Size: 576 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

          
# mst-drama

> an event or situation, especially an unexpected one, in which there is worry or excitement and usually a lot of **action**

[![Build Status](https://travis-ci.org/geut/mst-drama.svg?branch=master)](https://travis-ci.org/geut/mst-drama)

[![Stability: Experimental](https://masterminds.github.io/stability/experimental.svg)](https://masterminds.github.io/stability/experimental.html)

## Contents

* [Introduction](##introduction)

* [Installation](##installation)

## Introduction

Drama is a set of functions that help you to work with [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree)

and their **actions**.

At the moment there are only 2 functions:

#### connectReduxDevtools(remotedev: object, store: object, options: { trackYield: false })

connectReduxDevtools works similar to the original connect from MST but also tracks each `yield` in your async actions so

you can see in the redux devtool how the state mutates in each step.

```javascript

...

import { connectReduxDevtools } from '@geut/mst-drama';

...

connectReduxDevtools(require('remotedev'), store);

```

![connect-redux-devtool](https://github.com/geut/mst-drama/raw/master/example/connect-redux-devtool.gif)

#### flowMap(actions: object)

flowMap iterates over an object of actions and converts each generator function found in a flow async action.

```javascript

...

import { flowMap } from '@geut/mst-drama';

const Todo = types.model({

        title: types.string

    })

    .actions(self => flowMap({

        setTitle(newTitle) {

            self.title = newTitle

        },

        *asyncSetTitle(newTitle) {

            yield delay(2000);

            self.title = newTitle;

        }

    }))

```

## Installation

* NPM: `npm install @geut/mst-drama`

* Yarn: `yarn add @geut/mst-drama`