unsubscribe sink when component unmounted

Author: jcouyang

lib/__tests__/react-most-test.jsx

@@ -251,7 +251,7 @@ describe('react-most', () => {
     })
   })
 
-  describe('convension default to `action` field in sinks', ()=>{
+  describe('ERROR', ()=>{
     const Counter = connect(intent$=>{
       return {
         sink$: intent$.map(intent=>{
@@ -263,7 +263,7 @@ describe('react-most', () => {
           }
         }),
         actions: {
-          throwExeption: ()=>({type: 'exception'})
+          throwExeption: ()=>({type: 'exception'}),
         },
       }
     })(CounterView)
@@ -283,4 +283,47 @@ describe('react-most', () => {
       })
     })
   })
+
+  describe('unsubscribe when component unmounted', ()=>{
+    it('unsubscribe', (done)=>{
+      const Counter = connect(intent$=>{
+        let incForever$ = most.periodic(100, {type:'inc'}).map(intent=>{
+          done.fail('should not send intent any more')
+          return _=>_
+        })
+        return {
+          incForever$,
+          sink$: intent$.map(intent=>{
+            switch(intent.type) {
+              case 'inc':
+                return state=>({count:state.count+1})
+              default:
+                return state=>state
+            }
+          })
+        }
+      })(CounterView)
+
+      const TogglableMount = React.createClass({
+        getInitialState(){
+          return {
+            mount: true
+          }
+        },
+        render(){
+          return this.state.mount && <Counter history={true} />
+        }
+      })
+      spyOn(console, 'error')
+      let counterWrapper = TestUtils.renderIntoDocument(
+        <Most >
+          <TogglableMount />
+        </Most>
+      )
+      let toggle = TestUtils.findRenderedComponentWithType(counterWrapper, TogglableMount)
+      let counter = TestUtils.findRenderedComponentWithType(counterWrapper, Counter)
+      toggle.setState({mount:false})
+      done()
+    })
+  })
 })

lib/engine/most.js

@@ -14,7 +14,10 @@ export default function Engine() {
         console.error('There is Error in your reducer:',e, e.stack)
         return of(x=>x)
       })
-      .observe(f);
+      .subscribe({
+        next:f,
+        error: (e)=>console.error('Something is Wrong:',e, e.stack),
+      });
   }
   historyStream.travel = travelStream;
   return {intentStream, flatObserve, historyStream}

lib/react-most.js

@@ -54,7 +54,7 @@ export function connect(main, initprops={}) {
           this.setState(state=>pick(keys(state), nextProps))
         }
         componentDidMount(){
-          this.context[EACH_FLATMAP](this.sink$, (action)=>{
+          this.subscribtions = this.context[EACH_FLATMAP](this.sink$, (action)=>{
             if(action instanceof Function) {
               this.setState((prevState, props)=>{
                 let newState = action.call(this, prevState,props);
@@ -70,6 +70,9 @@ export function connect(main, initprops={}) {
             }
           });
         }
+        componentWillUnmount(){
+          this.subscribtions.unsubscribe()
+        }
         render() {
           return <WrappedComponent {...this.props} {...this.state} {...initprops} actions={this.actions} />
         }