Add sub-reducer support to NavigationStackReducer

Summary: Revise APIs of reducers, and ensure the stack reducer can support sub-reducers

Reviewed By: javache

Differential Revision: D2959915

fb-gh-sync-id: 20b28b9ead7ace3373489a806486999048d32aef
shipit-source-id: 20b28b9ead7ace3373489a806486999048d32aef

Libraries/CustomComponents/NavigationExperimental/NavigationCard.js

@@ -28,7 +28,7 @@
 'use strict';
 
 const Animated = require('Animated');
-const NavigationReducer = require('NavigationReducer');
+const NavigationRootContainer = require('NavigationRootContainer');
 const NavigationContainer = require('NavigationContainer');
 const PanResponder = require('PanResponder');
 const Platform = require('Platform');
@@ -95,7 +95,7 @@ class NavigationCard extends React.Component {
         const doesPop = (xRatio + vx) > 0.45;
         if (doesPop) {
           // todo: add an action which accepts velocity of the pop action/gesture, which is caught and used by NavigationAnimatedView
-          this.props.onNavigate(NavigationReducer.StackReducer.PopAction());
+          this.props.onNavigate(NavigationRootContainer.getBackAction());
           return;
         }
         Animated.spring(this.props.position, {

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -30,7 +30,7 @@
 const Animated = require('Animated');
 const Image = require('Image');
 const NavigationContainer = require('NavigationContainer');
-const NavigationReducer = require('NavigationReducer');
+const NavigationRootContainer = require('NavigationRootContainer');
 const React = require('react-native');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
@@ -103,7 +103,7 @@ class NavigationHeader extends React.Component {
     );
   }
   _handleBackPress() {
-    this.props.onNavigate(NavigationReducer.StackReducer.PopAction());
+    this.props.onNavigate(NavigationRootContainer.getBackAction());
   }
 }
 

Libraries/NavigationExperimental/NavigationStateUtils.js

@@ -66,14 +66,10 @@ function indexOf(state: NavigationState, key: string): ?number {
   return index;
 }
 
-function push(state: NavigationState, newChildState: NavigationState): NavigationState {
-  const parentState = getParent(state);
-  if (!parentState) {
-    return state;
-  }
-  var lastChildren: Array<NavigationState> = parentState.children;
+function push(state: NavigationParentState, newChildState: NavigationState): NavigationParentState {
+  var lastChildren: Array<NavigationState> = state.children;
   return {
-    ...parentState,
+    ...state,
     children: [
       ...lastChildren,
       newChildState,
@@ -82,14 +78,10 @@ function push(state: NavigationState, newChildState: NavigationState): Navigatio
   };
 }
 
-function pop(state: NavigationState): NavigationState {
-  const parentState = getParent(state);
-  if (!parentState) {
-    return state;
-  }
-  const lastChildren = parentState.children;
+function pop(state: NavigationParentState): NavigationParentState {
+  const lastChildren = state.children;
   return {
-    ...parentState,
+    ...state,
     children: lastChildren.slice(0, lastChildren.length - 1),
     index: lastChildren.length - 2,
   };

Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js

@@ -15,6 +15,7 @@ var NavigationStateUtils = require('NavigationStateUtils');
 
 import type {
   NavigationState,
+  NavigationParentState,
   NavigationReducer,
 } from 'NavigationStateUtils';
 
@@ -26,121 +27,81 @@ export type NavigationStackReducerAction = BackAction | {
   type: string,
 };
 
-const ActionTypes = {
-  PUSH: 'react-native/NavigationExperimental/stack-push',
-  POP: 'react-native/NavigationExperimental/stack-pop',
-  JUMP_TO: 'react-native/NavigationExperimental/stack-jumpTo',
-  JUMP_TO_INDEX: 'react-native/NavigationExperimental/stack-jumpToIndex',
-  RESET: 'react-native/NavigationExperimental/stack-reset',
+export type ReducerForStateHandler = (state: NavigationState) => NavigationReducer;
+
+export type PushedReducerForActionHandler = (action: any) => ?NavigationReducer;
+
+export type StackReducerConfig = {
+  /*
+   * The initialState is that the reducer will use when there is no previous state.
+   * Must be a NavigationParentState:
+   *
+   * {
+   *   children: [
+   *     {key: 'subState0'},
+   *     {key: 'subState1'},
+   *   ],
+   *   index: 0,
+   *   key: 'navStackKey'
+   * }
+   */
+  initialState: NavigationParentState;
+
+  /*
+   * Returns the sub-reducer for a particular state to handle. This will be called
+   * when we need to handle an action on a sub-state. If no reducer is returned,
+   * no action will be taken
+   */
+  getReducerForState?: ReducerForStateHandler;
+
+  /*
+   * Returns a sub-reducer that will be used when pushing a new route. If a reducer
+   * is returned, it be called to get the new state that will be pushed
+   */
+  getPushedReducerForAction: PushedReducerForActionHandler;
 };
 
-const DEFAULT_KEY = 'NAV_STACK_DEFAULT_KEY';
+const defaultGetReducerForState = (initialState) => (state) => state || initialState;
 
-function NavigationStackPushAction(state: NavigationState): NavigationStackReducerAction {
-  return {
-    type: ActionTypes.PUSH,
-    state,
-  };
-}
-
-function NavigationStackPopAction(): NavigationStackReducerAction {
-  return {
-    type: ActionTypes.POP,
-  };
-}
-
-function NavigationStackJumpToAction(key: string): NavigationStackReducerAction {
-  return {
-    type: ActionTypes.JUMP_TO,
-    key,
-  };
-}
-
-function NavigationStackJumpToIndexAction(index: number): NavigationStackReducerAction {
-  return {
-    type: ActionTypes.JUMP_TO_INDEX,
-    index,
-  };
-}
-
-function NavigationStackResetAction(children: Array<NavigationState>, index: number): NavigationStackReducerAction {
-  return {
-    type: ActionTypes.RESET,
-    index,
-    children,
-  };
-}
-
-type StackReducerConfig = {
-  initialStates: Array<NavigationState>;
-  initialIndex: ?number;
-  key: ?string;
-  matchAction: (action: any) => boolean;
-  actionStateMap: (action: any) => NavigationState;
-};
-
-function NavigationStackReducer({initialStates, initialIndex, key, matchAction, actionStateMap}: StackReducerConfig): NavigationReducer {
+function NavigationStackReducer({initialState, getReducerForState, getPushedReducerForAction}: StackReducerConfig): NavigationReducer {
+  const getReducerForStateWithDefault = getReducerForState || defaultGetReducerForState;
   return function (lastState: ?NavigationState, action: any): NavigationState {
-    if (key == null) {
-      key = DEFAULT_KEY;
-    }
-    if (initialIndex == null) {
-      initialIndex = initialStates.length - 1;
-    }
     if (!lastState) {
-      lastState = {
-        index: initialIndex,
-        children: initialStates,
-        key,
-      };
+      return initialState;
     }
     const lastParentState = NavigationStateUtils.getParent(lastState);
-    if (!action || !lastParentState) {
+    if (!lastParentState) {
       return lastState;
     }
     switch (action.type) {
-      case ActionTypes.PUSH:
-        return NavigationStateUtils.push(
-          lastParentState,
-          action.state
-        );
-      case ActionTypes.POP:
       case 'BackAction':
         if (lastParentState.index === 0 || lastParentState.children.length === 1) {
           return lastParentState;
         }
         return NavigationStateUtils.pop(lastParentState);
-      case ActionTypes.JUMP_TO:
-        return NavigationStateUtils.jumpTo(
-          lastParentState,
-          action.key
-        );
-      case ActionTypes.JUMP_TO_INDEX:
-        return NavigationStateUtils.jumpToIndex(
-          lastParentState,
-          action.index
-        );
-      case ActionTypes.RESET:
-        return {
-          ...lastParentState,
-          index: action.index,
-          children: action.children,
-        };
     }
-    if (matchAction(action)) {
+
+    const activeSubState = lastParentState.children[lastParentState.index];
+    const activeSubReducer = getReducerForStateWithDefault(activeSubState);
+    const nextActiveState = activeSubReducer(activeSubState, action);
+    if (nextActiveState !== activeSubState) {
+      const nextChildren = [...lastParentState.children];
+      nextChildren[lastParentState.index] = nextActiveState;
+      return {
+        ...lastParentState,
+        children: nextChildren,
+      };
+    }
+
+    const subReducerToPush = getPushedReducerForAction(action);
+    if (subReducerToPush) {
       return NavigationStateUtils.push(
         lastParentState,
-        actionStateMap(action)
+        subReducerToPush(null, action)
       );
     }
     return lastParentState;
   };
 }
 
-NavigationStackReducer.PushAction = NavigationStackPushAction;
-NavigationStackReducer.PopAction = NavigationStackPopAction;
-NavigationStackReducer.JumpToAction = NavigationStackJumpToAction;
-NavigationStackReducer.JumpToIndexAction = NavigationStackJumpToIndexAction;
-NavigationStackReducer.ResetAction = NavigationStackResetAction;
-
 module.exports = NavigationStackReducer;

Libraries/NavigationExperimental/Reducer/NavigationTabsReducer.js

@@ -24,8 +24,6 @@ const ActionTypes = {
   JUMP_TO: 'react-native/NavigationExperimental/tabs-jumpTo',
 };
 
-const DEFAULT_KEY = 'TABS_STATE_DEFAULT_KEY';
-
 export type JumpToAction = {
   type: typeof ActionTypes.JUMP_TO,
   index: number,
@@ -44,9 +42,6 @@ type TabsReducerConfig = {
 };
 
 function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConfig): NavigationReducer {
-  if (key == null) {
-    key = DEFAULT_KEY;
-  }
   return function(lastNavState: ?NavigationState, action: ?any): NavigationState {
     if (!lastNavState) {
       lastNavState = {
@@ -89,16 +84,16 @@ function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConf
       };
     });
     let selectedTabReducer = subReducers.splice(lastParentNavState.index, 1)[0];
-    subReducers.unshift(selectedTabReducer);
-    subReducers.push(function(navState: ?NavigationState, action: any): NavigationState {
+    subReducers.unshift(function(navState: ?NavigationState, action: any): NavigationState {
       if (navState && action.type === 'BackAction') {
         return NavigationStateUtils.jumpToIndex(
           lastParentNavState,
-          0
+          initialIndex || 0
         );
       }
       return lastParentNavState;
     });
+    subReducers.unshift(selectedTabReducer);
     const findReducer = NavigationFindReducer(subReducers, lastParentNavState);
     return findReducer(lastParentNavState, action);
   };

Libraries/NavigationExperimental/Reducer/__tests__/NavigationStackReducer-test.js

@@ -15,183 +15,90 @@ jest
  .mock('ErrorUtils');
 
 const NavigationStackReducer = require('NavigationStackReducer');
-
-const {
-  JumpToAction,
-  JumpToIndexAction,
-  PopAction,
-  PushAction,
-  ResetAction,
-} = NavigationStackReducer;
+const NavigationRootContainer = require('NavigationRootContainer');
 
 describe('NavigationStackReducer', () => {
 
-  it('handles PushAction', () => {
-    const initialStates = [
-      {key: 'route0'},
-      {key: 'route1'},
-    ];
-    let reducer = NavigationStackReducer({
-      initialStates,
-      matchAction: () => true,
-      actionStateMap: (action) => action,
-    });
-
-    let state = reducer();
-    expect(state.children).toBe(initialStates);
-    expect(state.index).toBe(1);
-    expect(state.key).toBe('NAV_STACK_DEFAULT_KEY');
-
-    state = reducer(state, PushAction({key: 'route2'}));
-    expect(state.children[0].key).toBe('route0');
-    expect(state.children[1].key).toBe('route1');
-    expect(state.children[2].key).toBe('route2');
-    expect(state.index).toBe(2);
-  });
-
-  it('handles PopAction', () => {
-    let reducer = NavigationStackReducer({
-      initialStates: [
+  it('provides default/initial state', () => {
+    const initialState = {
+      children: [
         {key: 'a'},
-        {key: 'b'},
       ],
-      initialIndex: 1,
+      index: 0,
       key: 'myStack',
-      matchAction: () => true,
-      actionStateMap: (action) => action,
+    };
+    const reducer = NavigationStackReducer({
+      getPushedReducerForAction: (action) => null,
+      getReducerForState: (state) => () => state,
+      initialState,
     });
-
-    let state = reducer();
-    expect(state.children[0].key).toBe('a');
-    expect(state.children[1].key).toBe('b');
-    expect(state.children.length).toBe(2);
-    expect(state.index).toBe(1);
-    expect(state.key).toBe('myStack');
-
-    state = reducer(state, PopAction());
-    expect(state.children[0].key).toBe('a');
-    expect(state.children.length).toBe(1);
-    expect(state.index).toBe(0);
-    expect(state.key).toBe('myStack');
-
-    // make sure Pop on an single-route state is a no-op
-    state = reducer(state, PopAction());
-    expect(state.children[0].key).toBe('a');
-    expect(state.children.length).toBe(1);
-    expect(state.index).toBe(0);
-    expect(state.key).toBe('myStack');
+    const dummyAction = {type: 'dummyAction'};
+    expect(reducer(null, dummyAction)).toBe(initialState);
   });
 
-  it('handles JumpToAction', () => {
-    let reducer = NavigationStackReducer({
-      initialStates: [
-        {key: 'a'},
-        {key: 'b'},
-        {key: 'c'},
-      ],
-      initialIndex: 0,
-      key: 'myStack',
-      matchAction: () => true,
-      actionStateMap: (action) => action,
+  it('handles basic reducer pushing', () => {
+    const reducer = NavigationStackReducer({
+      getPushedReducerForAction: (action) => {
+        if (action.type === 'TestPushAction') {
+          return (state) => state || {key: action.testValue};
+        }
+        return null;
+      },
+      getReducerForState: (state) => () => state,
+      initialState: {
+        children: [
+          {key: 'first'},
+        ],
+        index: 0,
+        key: 'myStack'
+      }
     });
+    const state1 = reducer(null, {type: 'default'});
+    expect(state1.children.length).toBe(1);
+    expect(state1.children[0].key).toBe('first');
+    expect(state1.index).toBe(0);
 
-    let state = reducer();
-    expect(state.children[0].key).toBe('a');
-    expect(state.children[1].key).toBe('b');
-    expect(state.children[2].key).toBe('c');
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(0);
-
-    state = reducer(state, JumpToAction('b'));
-    expect(state.children[0].key).toBe('a');
-    expect(state.children[1].key).toBe('b');
-    expect(state.children[2].key).toBe('c');
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(1);
-
-    state = reducer(state, JumpToAction('c'));
-    expect(state.children[0].key).toBe('a');
-    expect(state.children[1].key).toBe('b');
-    expect(state.children[2].key).toBe('c');
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(2);
-
-    state = reducer(state, JumpToAction('c'));
-    expect(state.children[0].key).toBe('a');
-    expect(state.children[1].key).toBe('b');
-    expect(state.children[2].key).toBe('c');
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(2);
-    expect(state.key).toBe('myStack');
+    const action = {type: 'TestPushAction', testValue: 'second'};
+    const state2 = reducer(state1, action);
+    expect(state2.children.length).toBe(2);
+    expect(state2.children[0].key).toBe('first');
+    expect(state2.children[1].key).toBe('second');
+    expect(state2.index).toBe(1);
   });
 
-  it('handles JumpToIndexAction', () => {
-    let reducer = NavigationStackReducer({
-      initialStates: [
-        {key: 'a'},
-        {key: 'b'},
-        {key: 'c'},
-      ],
-      initialIndex: 2,
-      key: 'myStack',
-      matchAction: () => true,
-      actionStateMap: (action) => action,
+  it('handles BackAction', () => {
+    const reducer = NavigationStackReducer({
+      getPushedReducerForAction: (action) => {
+        if (action.type === 'TestPushAction') {
+          return (state) => state || {key: action.testValue};
+        }
+        return null;
+      },
+      getReducerForState: (state) => () => state,
+      initialState: {
+        children: [
+          {key: 'a'},
+          {key: 'b'},
+        ],
+        index: 1,
+        key: 'myStack',
+      },
     });
 
-    let state = reducer();
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(2);
+    const state1 = reducer(null, {type: 'MyDefaultAction'});
+    expect(state1.children[0].key).toBe('a');
+    expect(state1.children[1].key).toBe('b');
+    expect(state1.children.length).toBe(2);
+    expect(state1.index).toBe(1);
+    expect(state1.key).toBe('myStack');
 
-    state = reducer(state, JumpToIndexAction(0));
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(0);
+    const state2 = reducer(state1, NavigationRootContainer.getBackAction());
+    expect(state2.children[0].key).toBe('a');
+    expect(state2.children.length).toBe(1);
+    expect(state2.index).toBe(0);
 
-    state = reducer(state, JumpToIndexAction(1));
-    expect(state.children[0].key).toBe('a');
-    expect(state.children[1].key).toBe('b');
-    expect(state.children[2].key).toBe('c');
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(1);
-    expect(state.key).toBe('myStack');
+    const state3 = reducer(state2, NavigationRootContainer.getBackAction());
+    expect(state3).toBe(state2);
   });
 
-  it('handles ResetAction', () => {
-    let reducer = NavigationStackReducer({
-      initialStates: [
-        {key: 'a'},
-        {key: 'b'},
-      ],
-      initialIndex: 1,
-      key: 'myStack',
-      matchAction: () => true,
-      actionStateMap: (action) => action,
-    });
-
-    let state = reducer();
-    expect(state.children[0].key).toBe('a');
-    expect(state.children[1].key).toBe('b');
-    expect(state.children.length).toBe(2);
-    expect(state.index).toBe(1);
-
-    state = reducer(state, ResetAction([{key: 'c'}, {key: 'd'}], 0));
-    expect(state.children[0].key).toBe('c');
-    expect(state.children[1].key).toBe('d');
-    expect(state.children.length).toBe(2);
-    expect(state.index).toBe(0);
-
-    const newStates = [
-      {key: 'e'},
-      {key: 'f'},
-      {key: 'g'},
-    ];
-
-    state = reducer(state, ResetAction(newStates, 1));
-    expect(state.children[0].key).toBe('e');
-    expect(state.children[1].key).toBe('f');
-    expect(state.children[2].key).toBe('g');
-    expect(state.children.length).toBe(3);
-    expect(state.index).toBe(1);
-    expect(state.key).toBe('myStack');
-  });
-
-});
+});