Create reduceReducers util

docs/api/reduceReducers.md

@@ -0,0 +1,146 @@
+---
+id: reducereducers
+title: reduceReducers
+hide_title: true
+description: 'API > reduceReducers: running multiple reducers on the same state'
+---
+
+ 
+
+# `reduceReducers(initialState, ...reducers)`
+
+## Overview
+
+The `reduceReducers` helper function composes multiple reducer functions into one. It runs each reducer in sequence, passing the result of each to the next, and returns the final result.
+
+For example, you might want a base reducer built using [`combineReducers`](./combineReducers), but then also include some logic that requires the full combined state.
+
+```js
+const combinedReducer = combineReducers({
+  counter: counterReducer,
+  todos: todosReducer
+})
+
+const rootReducer = reduceReducers(combinedReducer, otherTopLevelFeatureReducer)
+// or
+const rootReducer = reduceReducers(
+  { counter: 0, todos: [] },
+  combinedReducer,
+  otherTopLevelFeatureReducer
+)
+```
+
+## Arguments
+
+1. `initialState` (_any_): The initial state. This can also be the preloaded state for the reducer. This can also be omitted, and the first reducer's initial state will be used instead.
+
+2. `...reducers` (_Function_): A set of reducer functions that need to be composed into one.
+
+## Returns
+
+(_Function_): A reducer that invokes every reducer passed in order, and returns the result of the last reducer.
+
+## Example
+
+#### `reducers/todos.js`
+
+```js
+export default function todos(state = [], action) {
+  switch (action.type) {
+    case 'ADD_TODO':
+      return state.concat([action.text])
+    default:
+      return state
+  }
+}
+```
+
+#### `reducers/counter.js`
+
+```js
+export default function counter(state = 0, action) {
+  switch (action.type) {
+    case 'INCREMENT':
+      return state + 1
+    case 'DECREMENT':
+      return state - 1
+    default:
+      return state
+  }
+}
+```
+
+#### `reducers/otherTopLevelFeature.js`
+
+```js
+export default function otherTopLevelFeature(
+  state = { counter: 0, todos: [] },
+  action
+) {
+  switch (action.type) {
+    case 'COUNT_TODOS':
+      return {
+        ...state,
+        counter: state.todos.length
+      }
+    default:
+      return state
+  }
+}
+```
+
+#### `reducers/index.js`
+
+```js
+import { combineReducers, reduceReducers } from '@reduxjs/toolkit'
+import todos from './todos'
+import counter from './counter'
+import otherTopLevelFeature from './otherTopLevelFeature'
+
+export default reduceReducers(
+  combineReducers({
+    counter,
+    todos
+  }),
+  otherTopLevelFeature
+)
+```
+
+#### `App.js`
+
+```js
+import { configureStore } from '@reduxjs/toolkit'
+import reducer from './reducers/index'
+
+const store = configureStore({
+  reducer
+})
+console.log(store.getState())
+// {
+//   counter: 0,
+//   todos: []
+// }
+
+store.dispatch({
+  type: 'ADD_TODO',
+  text: 'Use Redux'
+})
+console.log(store.getState())
+// {
+//   counter: 0,
+//   todos: [ 'Use Redux' ]
+// }
+
+store.dispatch({
+  type: 'COUNT_TODOS'
+})
+console.log(store.getState())
+// {
+//   counter: 1,
+//   todos: [ 'Use Redux' ]
+// }
+```
+
+## Tips
+
+- You may call `reduceReducers` at any level of the reducer hierarchy. It doesn't have to happen at the top. In fact you may use it again to split the child reducers that get too complicated into independent grandchildren, and so on.

src/createStore.ts

@@ -21,7 +21,7 @@ import { kindOf } from './utils/kindOf'
  *
  * @internal
  */
-type NoInfer<T> = [T][T extends any ? 0 : never]
+export type NoInfer<T> = [T][T extends any ? 0 : never]
 
 /**
  * @deprecated

src/index.ts

@@ -1,6 +1,7 @@
 // functions
 import { createStore, legacy_createStore } from './createStore'
 import combineReducers from './combineReducers'
+import reduceReducers from './reduceReducers'
 import bindActionCreators from './bindActionCreators'
 import applyMiddleware from './applyMiddleware'
 import compose from './compose'
@@ -41,6 +42,7 @@ export {
   createStore,
   legacy_createStore,
   combineReducers,
+  reduceReducers,
   bindActionCreators,
   applyMiddleware,
   compose,

src/reduceReducers.ts

@@ -0,0 +1,59 @@
+import type { NoInfer } from './createStore'
+import type { Action } from './types/actions'
+import type { Reducer } from './types/reducers'
+
+/**
+ * Composes multiple reducers into one.
+ *
+ * @param initialState The initial state, which can be a different preloaded state.
+ * @param reducer The first reducer. Can accept a different preloaded state.
+ * @param reducers The rest of the reducers.
+ * @returns A reducer function that invokes every reducer passed in order, and returns the result of the last reducer.
+ */
+export default function reduceReducers<
+  S,
+  A extends Action,
+  Actions extends Action[],
+  P
+>(
+  initialState: NoInfer<P | S> | undefined,
+  reducer: Reducer<S, A, P>,
+  ...reducers: {
+    [K in keyof Actions]: Reducer<S, Actions[K]>
+  }
+): Reducer<S, A | Actions[number], P>
+/**
+ * Composes multiple reducers into one.
+ *
+ * @param reducer The first reducer. Can accept a different preloaded state.
+ * @param reducers The rest of the reducers.
+ * @returns A reducer function that invokes every reducer passed in order, and returns the result of the last reducer.
+ */
+export default function reduceReducers<
+  S,
+  A extends Action,
+  Actions extends Action[],
+  P
+>(
+  reducer: Reducer<S, A, P>,
+  ...reducers: {
+    [K in keyof Actions]: Reducer<S, Actions[K]>
+  }
+): Reducer<S, A | Actions[number], P>
+export default function reduceReducers<S, A extends Action, P>(
+  ...args: [P | S | undefined | Reducer<S, A, P>, ...Array<Reducer<S, A>>]
+): Reducer<S, A, P> {
+  const initialState =
+    typeof args[0] === 'function'
+      ? undefined
+      : (args.shift() as P | S | undefined)
+  const [firstReducer, ...restReducers] = args as [
+    Reducer<S, A, P>,
+    ...Reducer<S, A>[]
+  ]
+  return (state = initialState, action) =>
+    restReducers.reduce(
+      (state, reducer) => reducer(state, action),
+      firstReducer(state, action)
+    )
+}

test/reduceReducers.spec.ts

@@ -0,0 +1,34 @@
+import { reduceReducers } from 'redux'
+
+describe('Utils', () => {
+  describe('reduceReducers', () => {
+    const incrementReducer = (state = 0, action: { type: 'increment' }) =>
+      action.type === 'increment' ? state + 1 : state
+    const decrementReducer = (state = 0, action: { type: 'decrement' }) =>
+      action.type === 'decrement' ? state - 1 : state
+
+    it('runs multiple reducers in sequence and returns the result of the last one', () => {
+      const combined = reduceReducers(incrementReducer, decrementReducer)
+      expect(combined(0, { type: 'increment' })).toBe(1)
+      expect(combined(1, { type: 'decrement' })).toBe(0)
+    })
+    it('accepts an initial state argument', () => {
+      const combined = reduceReducers(2, incrementReducer, decrementReducer)
+      expect(combined(undefined, { type: 'increment' })).toBe(3)
+    })
+    it('can accept the preloaded state of the first reducer', () => {
+      const parserReducer = (state: number | string = 0) =>
+        typeof state === 'string' ? parseInt(state, 10) : state
+
+      const combined = reduceReducers(parserReducer, incrementReducer)
+      expect(combined('1', { type: 'increment' })).toBe(2)
+
+      const combined2 = reduceReducers('1', parserReducer, incrementReducer)
+      expect(combined2(undefined, { type: 'increment' })).toBe(2)
+    })
+    it('accepts undefined as initial state', () => {
+      const combined = reduceReducers(undefined, incrementReducer)
+      expect(combined(undefined, { type: 'increment' })).toBe(1)
+    })
+  })
+})

website/sidebars.js

@@ -152,6 +152,7 @@ module.exports = {
       'api/applymiddleware',
       'api/bindactioncreators',
       'api/compose',
+      'api/reducereducers',
       'api/utils',
       { type: 'link', label: 'Error Messages', href: '/errors' }
     ],