https://github.com/atellmer/react-spawn-x

React connector for spawn-x
https://github.com/atellmer/react-spawn-x

flux javascript mobx observer react reactive redux rxjs state store zone

Last synced: 7 days ago
JSON representation

React connector for spawn-x

• Host: GitHub
• URL: https://github.com/atellmer/react-spawn-x
• Owner: atellmer
• License: mit
• Created: 2017-02-27T12:22:59.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-17T11:17:40.000Z (almost 8 years ago)
• Last Synced: 2024-12-12T11:40:18.999Z (10 days ago)
• Topics: flux, javascript, mobx, observer, react, reactive, redux, rxjs, state, store, zone
• Language: JavaScript
• Homepage:
• Size: 42 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-spawn-x

### React connector for [spawn-x](https://github.com/atellmer/spawn-x).

## install

With npm:

```

npm install spawn-x react-spawn-x --save

```

With yarn:

```

yarn add spawn-x react-spawn-x

```

## Usage

#### app/index.js

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import App from './containers/App';

ReactDOM.render(

  ,

  document.getElementById('root')

);

```

#### app/store/index.js

```javascript

import { createStore, addInterceptor } from 'spawn-x';

const initialState = {

  users: [],

  some: {

    text: 'Hello World'

  },

  parent: {

    child: 'I am child'

  }

}

const store = createStore(

  initialState,

  addInterceptor(logger)

);

function logger(store) {

  return next => action => {

    next(action);

    console.log('action: ', action.type + ' -> ', action.data);

  }

}

export {

  store

}

```

#### app/actions/user.js

```javascript

import { store } from '../store';

const addUser = user => {

  store.update('users', {

    data: store.select('users').concat(user),

    type: 'ADD_NEW_USER'

  });

};

export {

  addUser

}

```

#### app/containers/App.js

```javascript

import React, { Component } from 'react';

import { connect } from 'react-spawn-x';

import { store } from '../store';

import { addUser } from '../actions/user';

import MyPresenterComponent from '../components/Presenter';

class App extends Component {

  render() {

    return (

      


        

      

    );

  }

}


//our selection from state (for data we apply specific selector. It's just for example)

const selection = {

  users: 'users',

  text: 'some.text',

  data: ['parent.child', state => state.parent.child]

};

//wrap App component

export default connect(store)(selection)(App);

```

#### app/components/Presenter.js

```javascript

import React, { Component } from 'react';

class MyPresenter extends Component {

  handleSubmit = (ev) => {

    ev.preventDefault();

    console.log('some text from state: ', this.props.text);

    console.log('some data from state: ', this.props.data);

    this.props.addUser({

      name: ev.target.name.value,

      age: ev.target.age.value

    });

    ev.target.name.value = '';

    ev.target.age.value = '';

  }

  render () {

    return (

      


        
User List

        


          {this.props.users.map((user, index) => {

            return 
name: {user.name} age: {user.age}

          })}

        

        

          

          

          Add New User

        

      

    )

  }

}


export default MyPresenter;

```

## LICENSE

MIT © [Alex Plex](https://github.com/atellmer)