Negotiate Pushing Milestone

    react-rx-actions

    0.2.2 • Public • Published

    React Rx Actions

    Seperate UI and Business logic using an unidirectional data-flow.

    Business logic in Rx

    import { Action$, toReact } from 'react-rx-actions';
     
    // Step 1. Listen to the Action$
    Action$
      .ofType('LOGIN')
      .map(function(){
        /* do stuff */
        return { name: 'Mark', role: 'Admin'}
      })
      // Step 2. Publish data to React
      .map(user => ({ user }))
      .do(toReact('user'))

    UI in React

    import { createContainer, dispatch } from 'react-rx-actions';
     
    // In your component
    class MyComponent() extends Component {
      // Step 3. Render your data in react
      render() {
        <div>Current user: { this.props.user.name }</div>;
      }  
     
      // Step 4. Dispatch actions, goto step 1
      onLoginClick(){
        dispatch('LOGIN', {username: '...', password: '...' })
      }
    }
     
    export default createContainer(['user'])(MyComponent)

    Install

    npm i react-rx-actions

    DownloadsWeekly Downloads

    1

    Version

    0.2.2

    License

    MIT

    Last publish

    Collaborators

    • markmarijnissen