[DRAFT]: Add a Code Splitting page to the 'Recipes' section #3190
Conversation
docs/recipes/CodeSplitting.md
Outdated
|
|
||
| ## Libraries and Frameworks | ||
| There are a few good libraries out there that can help you add the above functionality automatically: | ||
| * [`redux-dynamic-reducer`](https://github.com/ioof-holdings/redux-dynamic-reducer) |
There was a problem hiding this comment.
Hey, I'm the author/maintainer of redux-dynamic-reducer and while I'm stoked you want to include my library in these docs, it's unfortunately out of active development and will be deprecated soon.
Luckily, we do have a new library called redux-dynostore which supersedes it, adding more configurability and dynamic sagas support and you still get the addReducers function on the store and react bindings for ease of use.
|
I'll try to take a look at this in the next few days - been busy with ReactConf and work. |
docs/recipes/CodeSplitting.md
Outdated
| # 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. The default usage of Redux mandates that a single root reducer should to be passed to the `configureStore` call, which makes dynamically adding new reducers more difficult. Below, we discuss some approaches to solving this problem and reference two libraries that provide this functionality. |
There was a problem hiding this comment.
Rephrase this a bit. It's not that "default usage mandates a single root reducer". It's that there is only one reducer, and the standard usage is to split that up into smaller functions for maintainability.
docs/recipes/CodeSplitting.md
Outdated
| To code split with Redux, we want to be able to dynamically add reducers to the store. The default usage of Redux mandates that a single root reducer should to be passed to the `configureStore` call, which makes dynamically adding new reducers more difficult. Below, we discuss some approaches to solving this problem and reference two libraries that provide this functionality. | ||
|
|
||
| ## Basic Principle | ||
| To dynamically add Reducers to a Redux store, there are two approaches that can be taken |
There was a problem hiding this comment.
I'd say there's only one approach - calling store.replaceReducer(). However, there may be some different ways you can handle re-creating the root reducer.
| ## Basic Principle | ||
| To dynamically add Reducers to a Redux store, there are two approaches that can be taken | ||
|
|
||
| ### Using `replaceReducer` |
There was a problem hiding this comment.
Let's have a small section on what replaceReducer() is here, then move any discussion of injectReducers() or similar to an additional header section.
docs/recipes/CodeSplitting.md
Outdated
| * [`redux-dynamic-reducer`](https://github.com/ioof-holdings/redux-dynamic-reducer) | ||
| * This library exposes the `addReducer` function on the Redux store to accomplish the behavior we described above. It also has React bindings which make it easier to add reducers within the React component lifecycle. | ||
| * [`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). |
There was a problem hiding this comment.
Might as well toss in a link to the list of additional libs I've seen: https://github.com/markerikson/redux-ecosystem-links/blob/master/reducers.md#dynamic-reducer-injection
|
Deploy preview for redux-docs ready! Built with commit 5a72594 |
|
Just made those tweaks and merged this in. @abettadapur , thanks for writing this! |
|
It would be nice addition to know how to access the store in order to call Some people recommend creating and then exporting the store, which other components or logic can import. What would be the recommended way? Could the docs show a small simple HOC in order to achieve this with a connected component? |
|
Right now, the options are:
The problem is none of these are great solutions and I'd struggle to recommend any of them or want to endorse them by making them examples in the docs, except perhaps using a library, which I don't think there should be an example of in the See this issue and this PR for details and please leave feedback if you have any. |
|
Thanks for the detailed answer @mpeyper One additional question, how would one inject middlewares along with reducers during run-time? |
|
There's no built in way to do this and I'm not sure how I would a achieve this myself but I believe the redux-dynamic-modules library supports this. |
|
@mpeyper Yeah they do, but migrating to Thanks |
An initial draft at a code splitting page. @markerikson Let me know your thoughts, if I need to add more sections or clarify anything in more detail