preparing the store

playground/e2e/app.test.js

@@ -26,7 +26,7 @@ describe('app', () => {
 
   xit('screen lifecycle', () => {
     elementByLabel('Switch to lifecycle screen').tap();
-    expect(elementByLabel('Appeared!')).toBeVisible();
+    expect(elementByLabel('onStart!')).toBeVisible();
   });
 });
 

playground/src/containers/LifecycleScreen.js

@@ -9,12 +9,12 @@ class LifecycleScreen extends Component {
     };
   }
 
-  onAppear() {
-    this.setState({ text: 'Appeared!' });
+  onStart() {
+    this.setState({ text: 'onStart!' });
   }
 
-  onDisappear() {
-    this.setState({ text: 'Disappeared!' });
+  onStop() {
+    this.setState({ text: 'onStop!' });
   }
 
   render() {

src/containers/ContainerRegistry.js

@@ -9,7 +9,7 @@ export default class ContainerRegistry {
   registerContainer(containerName, getContainerFunc) {
     const OriginalContainer = getContainerFunc();
     const NavigationContainer = ContainerWrapper.wrap(containerName, OriginalContainer, this.store);
-    this.store.setContainerClass(containerName, NavigationContainer);
+    this.store.setContainerClassForName(containerName, NavigationContainer);
     AppRegistry.registerComponent(containerName, () => NavigationContainer);
   }
 }

src/containers/ContainerRegistry.test.js

@@ -7,6 +7,7 @@ import Store from './Store';
 
 describe('ContainerRegistry', () => {
   let uut;
+  let store;
 
   class MyContainer extends Component {
     render() {
@@ -15,8 +16,9 @@ describe('ContainerRegistry', () => {
   }
 
   beforeEach(() => {
+    store = new Store();
     AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
-    uut = new ContainerRegistry(new Store());
+    uut = new ContainerRegistry(store);
   });
 
   it('registers container component by containerName into AppRegistry', () => {
@@ -26,6 +28,15 @@ describe('ContainerRegistry', () => {
     expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyContainer.name');
   });
 
+  it('saves the container wrapped into the store', () => {
+    expect(store.getContainerClassForName('example.MyContainer.name')).toBeUndefined();
+    uut.registerContainer('example.MyContainer.name', () => MyContainer);
+    const Class = store.getContainerClassForName('example.MyContainer.name');
+    expect(Class).not.toBeUndefined();
+    expect(Class).not.toEqual(MyContainer);
+    expect(Object.getPrototypeOf(Class)).toEqual(Component);
+  });
+
   it('resulting in a normal component', () => {
     uut.registerContainer('example.MyContainer.name', () => MyContainer);
     const Container = AppRegistry.registerComponent.mock.calls[0][1]();

src/containers/ContainerWrapper.js

@@ -1,22 +1,26 @@
 import React, { Component } from 'react';
 
 export default class ContainerWrapper {
-  static wrap(containerName, OriginalContainer, propStore) {
+  static wrap(containerName, OriginalContainer, store) {
     return class extends Component {
       constructor(props) {
         super(props);
-        if (!props.id) {
-          throw new Error(`Container ${containerName} does not have an id!`);
-        }
+        this._assertId(props);
         this.state = {
           id: props.id,
-          allProps: { ...props, ...propStore.getPropsForContainerId(props.id) }
+          allProps: { ...props, ...store.getPropsForContainerId(props.id) }
         };
       }
 
+      _assertId(props) {
+        if (!props.id) {
+          throw new Error(`Container ${containerName} does not have an id!`);
+        }
+      }
+
       componentWillReceiveProps(nextProps) {
         this.setState({
-          allProps: { ...nextProps, ...propStore.getPropsForContainerId(this.state.id) }
+          allProps: { ...nextProps, ...store.getPropsForContainerId(this.state.id) }
         });
       }
 

src/containers/ContainerWrapper.test.js

@@ -50,7 +50,7 @@ describe('ContainerWrapper', () => {
     }).toThrow(new Error('Container example.MyContainer does not have an id!'));
   });
 
-  it('wraps the container and saves to store', () => {
+  it('wraps the container', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
     expect(NavigationContainer).not.toBeInstanceOf(MyContainer);
     const tree = renderer.create(<NavigationContainer id={'container1'} />);

src/containers/Store.js

@@ -4,6 +4,7 @@ export default class Store {
   constructor() {
     this.propsByContainerId = {};
     this.containersByName = {};
+    this.refsById = {};
   }
 
   setPropsForContainerId(containerId, props) {
@@ -14,11 +15,24 @@ export default class Store {
     return _.get(this.propsByContainerId, containerId, {});
   }
 
-  setContainerClass(containerName, ContainerClass) {
+  setContainerClassForName(containerName, ContainerClass) {
     this.containersByName[containerName] = ContainerClass;
   }
 
-  getContainerClass(containerName) {
+  getContainerClassForName(containerName) {
     return this.containersByName[containerName];
   }
+
+  setRefForId(id, ref) {
+    this.refsById[id] = ref;
+  }
+
+  getRefForId(id) {
+    return this.refsById[id];
+  }
+
+  cleanId(id) {
+    this.refsById[id] = undefined;
+    this.propsByContainerId[id] = undefined;
+  }
 }

src/containers/Store.test.js

@@ -26,8 +26,25 @@ describe('Store', () => {
     const MyComponent = class {
       //
     };
-    uut.setContainerClass('example.mycontainer', MyComponent);
-    expect(uut.getContainerClass('example.mycontainer')).toEqual(MyComponent);
+    uut.setContainerClassForName('example.mycontainer', MyComponent);
+    expect(uut.getContainerClassForName('example.mycontainer')).toEqual(MyComponent);
+  });
+
+  it('holds container refs by id', () => {
+    const ref = {};
+    uut.setRefForId('refUniqueId', ref);
+    expect(uut.getRefForId('other')).toBeUndefined();
+    expect(uut.getRefForId('refUniqueId')).toBe(ref);
+  });
+
+  it('clean by id', () => {
+    uut.setRefForId('refUniqueId', {});
+    uut.setPropsForContainerId('refUniqueId', { foo: 'bar' });
+
+    uut.cleanId('refUniqueId');
+
+    expect(uut.getRefForId('refUniqueId')).toBeUndefined();
+    expect(uut.getPropsForContainerId('refUniqueId')).toEqual({});
   });
 });