/**

 * IMPORTANT ***************************************************************

 * 

 * This example uses the global version of RxJS that includes ALL operators.

 * Inside your app, you will likely need to import the operators you use or

 * import all of them in your index.js entry file.

 * 

 * Learn more about this: http://goo.gl/4ZlYeC

 */

​

console.clear();

​

const { Observable } = Rx;

const { combineEpics } = ReduxObservable;

​

const a = {

  INVITE_USER: 'INVITE_USER'

};

​

const authActions = {

  REGISTER_REQ: 'REGISTER_REQ',

  REGISTER_SUCCESS: 'REGISTER_SUCCESS'

};

​

const push = path => ({

  type: 'PUSH',

  path

});

​

const registerEpic = (action$) =>

  action$.ofType(authActions.REGISTER_REQ)

    .delay(500)

    .map(() => ({

      type: authActions.REGISTER_SUCCESS

    }));

​

const inviteUserEpic = (action$) =>

  action$.ofType(a.INVITE_USER)

    .flatMap(({ body }) =>

      Observable.concat(

        Observable.of({ type: authActions.REGISTER_REQ, body }),

        action$.ofType(authActions.REGISTER_SUCCESS)

          .map(() => push(`/team/${body.teamId}`))

      )

    );

​

const rootEpic = combineEpics(registerEpic, inviteUserEpic);

​

const reducer = (state = [], action) => {

  console.log(action);

  return [

    ...state,

    action

  ];

};

​

const { connect } = ReactRedux;

​

let App = ({ inviteUser, actions }) => (

  <div>

    <button onClick={inviteUser}>Invite User</button>

    <div>

      <h4>Actions dispatched:</h4>

      {actions.map(action =>

        <p>{action.type}</p>

      )}

    </div>

  </div>

);

​

App = connect(state => ({ actions: state }), dispatch => ({

  inviteUser: () => dispatch({

    type: a.INVITE_USER,

    body: {

      teamId: 123

    }

  })

}))(App);

​

// redux/configureStore.js

​

const { Provider } = ReactRedux;

const { createStore, applyMiddleware } = Redux;

const { createEpicMiddleware } = ReduxObservable;

​

const epicMiddleware = createEpicMiddleware(rootEpic);

​

const store = createStore(reducer,

  applyMiddleware(epicMiddleware)

);

​

// index.js

​

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);

​