https://github.com/rtorr/welp

A small base component and base store for immutable flux
https://github.com/rtorr/welp

Last synced: 20 days ago
JSON representation

A small base component and base store for immutable flux

• Host: GitHub
• URL: https://github.com/rtorr/welp
• Owner: rtorr
• License: mit
• Created: 2015-11-07T19:59:07.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-04-01T17:20:49.000Z (over 8 years ago)
• Last Synced: 2024-11-24T13:03:23.239Z (28 days ago)
• Language: JavaScript
• Size: 52.7 KB
• Stars: 2
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Welp ![Build status](https://circleci.com/gh/rtorr/welp.svg?style=shield&circle-token=:2d24fea4f59a17f8760f93ffe38598ac3ed162e6) [![Coverage Status](https://coveralls.io/repos/rtorr/welp/badge.svg?branch=master&service=github)](https://coveralls.io/github/rtorr/welp?branch=master)

small and simple immutable flux

### Installation

To install the stable version:

```

npm install --save welp

```

## Docs

***`WelpStore (object: {key: value}, callback_function: action)`***

`WelpStore` takes two arguments. First is a javascript object that will be turned into an 

[Immutable Map](http://facebook.github.io/immutable-js/docs/#/Map). 

`WelpStore's` second argument is a callback function that has dispatched action objects passed to it

```

const HelloStore = new WelpStore(

  {hello: {

    count: 0

  }},

  action => {

    switch (action.type) {

      case UPDATE_NUMBER:

        return HelloStore.replace(HelloStore.data().updateIn(['hello', 'count'], _ => action.data));

    }

  }

);

```

***`WelpComponent`***

WelpComponent is a base class for a React component that will implement Welp's Immutable store.

I think by reading the small source, you can kind of see what it is up to. 

pass `props` and and an array of `[stores]` to super.

`WelpComponent` will bind to all of the stores passed in that array. When data changes in the stores,

`WelpComponent` will make a comparison of the previous state and previous props to see if there were changes,

if so, we will re-render (look at `shouldComponentUpdate` in `WelpComponent`).

```

class App extends WelpComponent {

  constructor(props){

    super(props, [HelloStore])

    this.handleUpdateNumberChange = this.handleUpdateNumberChange.bind(this);

  }

  handleUpdateNumberChange() {

    return update_number(this.state.hello.count+1);

  }

  render() {

    return (

      


        
Hello world! {this.state.hello.count}

        Add + 1

      

    );

  }

}

```


### Examples

```

git clone [email protected]:rtorr/welp.git

cd welp

npm run examples

 

open http://localhost:8181/examples/index.html

```