Feature - Combine reducers

packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js

@@ -22,6 +22,7 @@ let SchedulerTracing;
 let Suspense;
 let useState;
 let useReducer;
+let combineReducers;
 let useEffect;
 let useLayoutEffect;
 let useCallback;
@@ -45,6 +46,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     SchedulerTracing = require('scheduler/tracing');
     useState = React.useState;
     useReducer = React.useReducer;
+    combineReducers = React.combineReducers;
     useEffect = React.useEffect;
     useLayoutEffect = React.useLayoutEffect;
     useCallback = React.useCallback;
@@ -614,6 +616,54 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span(3)]);
     });
 
+    it('can successfully combine reducers', () => {
+      function upReducer(state, action) {
+        return action === 'increment' ? state + 1 : state;
+      }
+
+      function downReducer(state, action) {
+        return action === 'decrement' ? state - 1 : state;
+      }
+
+      const rootReducer = combineReducers({
+        upCount: upReducer,
+        downCount: downReducer,
+      });
+
+      const initialState = {
+        upCount: 0,
+        downCount: 0,
+      };
+
+      function Counter() {
+        const [{upCount, downCount}, dispatch] = useReducer(
+          rootReducer,
+          initialState,
+        );
+        if (upCount < 3) {
+          dispatch('increment');
+          dispatch('decrement');
+        }
+        Scheduler.unstable_yieldValue('Up Render: ' + upCount);
+        Scheduler.unstable_yieldValue('Down Render: ' + downCount);
+        return <Text text={upCount + ' : ' + downCount} />;
+      }
+
+      ReactNoop.render(<Counter />);
+      expect(Scheduler).toFlushAndYield([
+        'Up Render: 0',
+        'Down Render: 0',
+        'Up Render: 1',
+        'Down Render: -1',
+        'Up Render: 2',
+        'Down Render: -2',
+        'Up Render: 3',
+        'Down Render: -3',
+        '3 : -3',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('3 : -3')]);
+    });
+
     it('uses reducer passed at time of render, not time of dispatch', () => {
       // This test is a bit contrived but it demonstrates a subtle edge case.
 

packages/react/index.js

@@ -53,6 +53,7 @@ export {
   useLayoutEffect,
   useMemo,
   useReducer,
+  combineReducers,
   useRef,
   useState,
   useMutableSource,

packages/react/src/React.js

@@ -44,6 +44,7 @@ import {
   useMemo,
   useMutableSource,
   useReducer,
+  combineReducers,
   useRef,
   useState,
   useTransition,
@@ -93,6 +94,7 @@ export {
   useMemo,
   useMutableSource,
   useReducer,
+  combineReducers,
   useRef,
   useState,
   REACT_FRAGMENT_TYPE as Fragment,

packages/react/src/ReactHooks.js

@@ -99,6 +99,18 @@ export function useReducer<S, I, A>(
   return dispatcher.useReducer(reducer, initialArg, init);
 }
 
+export function combineReducers<A>(reducersDict: Object) {
+  return function(state: Object, action: A) {
+    return Object.keys(reducersDict).reduce(
+      (accumulated: Object, currentKey: string) => ({
+        ...accumulated,
+        [currentKey]: reducersDict[currentKey](state[currentKey], action),
+      }),
+      state,
+    );
+  };
+}
+
 export function useRef<T>(initialValue: T): {|current: T|} {
   const dispatcher = resolveDispatcher();
   return dispatcher.useRef(initialValue);