react-spawn-x

React connector for 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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';


ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

app/store/index.js

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

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

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 (
      <div className="App">
        <MyPresenterComponent
          users={this.props.users}
          text={this.props.text}
          data={this.props.data}
          addUser={addUser}/>
      </div>
    );
  }
}

//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

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 (
      <div>
        <h1>User List</h1>
        <ul>
          {this.props.users.map((user, index) => {
            return <li key={index}>name: {user.name} age: {user.age}</li>
          })}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="name"/>
          <input type="number" name="age"/>
          <button type="submit">Add New User</button>
        </form>
      </div>
    )
  }
}

export default MyPresenter;

LICENSE

MIT © Alex Plex