Skip to content

Commit

Permalink
Fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson committed Dec 16, 2018
1 parent 2338655 commit 5a72594
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 27 deletions.
54 changes: 28 additions & 26 deletions docs/recipes/CodeSplitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,21 @@ hide_title: true
---

# Code Splitting

In large web applications, it is often desirable to split up the app code into multiple JS bundles that can be loaded on-demand. This strategy, called 'code splitting', helps to increase performance of your application by reducing the size of the initial JS payload that must be fetched.

To code split with Redux, we want to be able to dynamically add reducers to the store. However, Redux really only has a single root reducer function. This root reducer is normally generated by calling `combineReducers()` or a similar function when the application is initialized. In order to dynamically add more reducers, we need to call that function again to re-generate the root reducer. Below, we discuss some approaches to solving this problem and reference two libraries that provide this functionality.
To code split with Redux, we want to be able to dynamically add reducers to the store. However, Redux really only has a single root reducer function. This root reducer is normally generated by calling `combineReducers()` or a similar function when the application is initialized. In order to dynamically add more reducers, we need to call that function again to re-generate the root reducer. Below, we discuss some approaches to solving this problem and reference two libraries that provide this functionality.

## Basic Principle

### Using `replaceReducer`

The Redux store exposes a `replaceReducer` function, which replaces the current active root reducer function with a new root reducer function. Calling it will swap the internal reducer function reference, and dispatch an action to help any newly-added slice reducers initialize themselves:
The Redux store exposes a `replaceReducer` function, which replaces the current active root reducer function with a new root reducer function. Calling it will swap the internal reducer function reference, and dispatch an action to help any newly-added slice reducers initialize themselves:

```js
const newRootReducer = combineReducers({
existingSlice : existingSliceReducer,
newSlice : newSliceReducer,
existingSlice: existingSliceReducer,
newSlice: newSliceReducer
})

store.replaceReducer(newRootReducer)
Expand All @@ -29,48 +30,49 @@ store.replaceReducer(newRootReducer)

### Defining an `injectReducer` function

We will likely want to call `store.replaceReducer()` from anywhere in the application. Because of that, it's helpful
We will likely want to call `store.replaceReducer()` from anywhere in the application. Because of that, it's helpful
to define a reusable `injectReducer()` function that keeps references to all of the existing slice reducers, and attach
that to the store instance.
that to the store instance.

```javascript
import { createStore } from 'redux';
import { createStore } from 'redux'

// Define the Reducers that will always be present in the appication
const staticReducers = {
users: usersReducer,
posts: postsReducer
};
users: usersReducer,
posts: postsReducer
}

// Configure the store
export default function configureStore(initialState) {
const store = createStore(createReducer(), initialState);
const store = createStore(createReducer(), initialState)

// Add a dictionary to keep track of the registered async reducers
store.asyncReducers = {};
store.asyncReducers = {}

// Create an inject reducer function
// This function adds the async reducer, and creates a new combined reducer
store.injectReducer = (key, asyncReducer) => {
this.asyncReducers[key] = asyncReducer;
this.replaceReducer(createReducer(this.asyncReducers));
};
this.asyncReducers[key] = asyncReducer
this.replaceReducer(createReducer(this.asyncReducers))
}

// Return the modified store
return store;
return store
}

function createReducer(asyncReducers) {
return combineReducers({
...staticReducers,
...asyncReducers
});
return combineReducers({
...staticReducers,
...asyncReducers
})
}

```

Now, one just needs to call `store.injectReducer` to add a new reducer to the store.

### Using a 'Reducer Manager'

Another approach is to create a 'Reducer Manager' object, which keeps track of all the registered reducers and exposes a `reduce()` function. Consider the following example:

```javascript
Expand Down Expand Up @@ -158,8 +160,8 @@ To remove a reducer, one can now call `store.reducerManager.remove("asyncState")

There are a few good libraries out there that can help you add the above functionality automatically:

* [`redux-dynostore`](https://github.com/ioof-holdings/redux-dynostore):
Provides tools for building dynamic Redux stores, including dynamically adding reducers and sagas, and React bindings to help you add in association with components.
* [`redux-dynamic-modules`](https://github.com/Microsoft/redux-dynamic-modules):
This library introduces the concept of a 'Redux Module', which is a bundle of Redux artifacts (reducers, middleware) that should be dynamically loaded. It also exposes a React higher-order component to load 'modules' when areas of the application come online. Additionally, it has integrations with libraries like `redux-thunk` and `redux-saga` which also help dynamically load their artifacts (thunks, sagas).
* [Redux Ecosystem Links: Reducers - Dynamic Reducer Injection](https://github.com/markerikson/redux-ecosystem-links/blob/master/reducers.md#dynamic-reducer-injection)
- [`redux-dynostore`](https://github.com/ioof-holdings/redux-dynostore):
Provides tools for building dynamic Redux stores, including dynamically adding reducers and sagas, and React bindings to help you add in association with components.
- [`redux-dynamic-modules`](https://github.com/Microsoft/redux-dynamic-modules):
This library introduces the concept of a 'Redux Module', which is a bundle of Redux artifacts (reducers, middleware) that should be dynamically loaded. It also exposes a React higher-order component to load 'modules' when areas of the application come online. Additionally, it has integrations with libraries like `redux-thunk` and `redux-saga` which also help dynamically load their artifacts (thunks, sagas).
- [Redux Ecosystem Links: Reducers - Dynamic Reducer Injection](https://github.com/markerikson/redux-ecosystem-links/blob/master/reducers.md#dynamic-reducer-injection)
1 change: 0 additions & 1 deletion docs/recipes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ hide_title: true

These are some use cases and code snippets to get you started with Redux in a real app. They assume you understand the topics in [basic](../basics/README.md) and [advanced](../advanced/README.md) tutorials.


- [Configuring Your Store](ConfiguringYourStore.md)
- [Migrating to Redux](MigratingToRedux.md)
- [Using Object Spread Operator](UsingObjectSpreadOperator.md)
Expand Down

0 comments on commit 5a72594

Please sign in to comment.