Official FAQ

[markerikson]

I've noticed a LOT of FAQs appearing in Reactiflux, SO, the issues list, etc. Stuff like "sharing state between reducer branches", and "any good-sized Redux examples?", and so on. Is there a good place to create an FAQ list for Redux? Should there be a new page in the docs folder? Add a wiki to this repo? Create a separate repo? I can always go create my own FAQ repo, but figure it's probably worth coordinating with everyone else on this.

[gaearon]

This would make a great top-level doc entry.
I'm happy to collaborate on this if you take the initiative and gather the common questions.

[pedrottimark]

Here is a resource which starts out a bit negative but has practical advice (for example, use that insight to improve your site’s content) and links to more.

http://alistapart.com/article/infrequently-asked-questions-of-faqs

[markerikson]

@pedrottimark , thanks for the pointer.

Throwing together a scratch list of initial possible questions / topics as I skim through the issues list and SO questions:

• Sharing state between reducers ("Reducer B needs to know state at key 'A')
• Are there any larger real Redux projects?
• Why should "type" be a string, or at least serializable?
• Do I have to put all my state into Redux / should I ever use React's setState()?
• Do I have to only connect my top-level component? (yes, React-Redux specific, but relevant)
• Do I have to deep-copy my state? Isn't copying my state going to be slow?
• Can I / should I create multiple stores?
• Won't calling "all my reducers" for each action be slow?
• Should I have 1-1 mappings between reducers and actions?
• Do I have to use combineReducers?

Related "docs"-tagged issues and assorted discussions:

• "Apps using Redux (“Apps using Redux” #1078)
• "Combining reducers recipe" (Add “Combining reducers” recipe #1018)
• "A call for quality articles" (A call for quality articles, examples, and resources #1014)

That's a quick first cut. @gaearon , you've obviously been answering a lot more questions about Redux for longer than anyone else. Any suggestions for topics you'd like to have some centralized answers covered?

[markerikson]

In general, a lot of questions seem to be about structuring reducers and areas of responsibility (Redux state vs component state, logic in actions vs logic in reducers). Also storing non-primitives/objects in the state. I know that the "combineReducers" doc page talks about structuring reducers, but perhaps there ought to be a more comprehensive page on that topic?

[Dattaya]

Lots of questions are answered in the docs but I guess it's still good to have a short question--short answer section with links to articles/sections of the docs/discussions.
Few more possible Q&As (draft stage):

Structuring

• My reducer is too big, how do I subdivide it (related to 'Should I have 1-1 mappings between reducers and actions?')
  • A reducer could be subdivided into subreducers with e.g. reduce-reducers. Subscribing to the same action in more than one reducer is also acceptable and could be used to split reducer into multiple pieces.
• Where is the best place to keep my selectors?
  • The common practice it to keep them alongside the corresponding reducer.

Performance

• My selector takes too much time to complete and is called on every update of a component; as a result my app performs poorly. How to solve this problem?
  • Memoization is one way to solve it, see reselect. Also read Computing Derived Data section of the Redux documentation.

Other

• Is it OK to have more than one middleware chain in my store enhancer?
  • It is not recommended. For more details see this discussion.
• How do I subscribe to only the portion of the state?
  • Please use https://github.com/jprichardson/redux-watch for this. Alternatively you can use https://github.com/wbuchwalter/ng2-redux which handles subscriptions for you. (answer copied from here: Feature request, subscribe to only a portion of the store... #1328 )

[Dattaya]

Some other things that we can transform into questions if necessary:

• Dispatch multiple actions as one/receive multiple actions at once: redux-batched-updates, redux-batched-subscribe
• Alternative to normalizr, lodash/keyBy, might be enough for simple projects if all we need is to transform an array returned from the server into a map id => item: products: keyBy(products, '_id')

[markerikson]

More ideas:

• Can/should the store be referenced be importing it elsewhere in the app, for manually passing down to components and binding actions? Is there a good reason to keep from referencing it directly?
• Size of the state / "giant objects" / memory usage

[pci]

This is a great idea. Other points you might consider:

• General guidelines on designing state structure
• Not really a question, but it would be great to cover that a number of bigger redux projects put the complexity into the selectors, getting started this was something that tripped me up. I guess it comes under the heading of managing a larger project

I'm only just starting out with redux, but if I can be of any help putting these together, even if it's only answering "are these answers non-expert friendly", then I'll be happy to help.

[gaearon]

Few questions I recently answered:

• http://stackoverflow.com/questions/35406707/do-events-and-actions-have-a-11-relationship-in-redux/35410524#35410524
• http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
• http://stackoverflow.com/questions/35416466/how-to-dispatch-an-action-from-a-service-unaware-of-redux/35417246#35417246
• http://stackoverflow.com/questions/35417507/how-to-make-a-global-error-handler-in-redux-and-override-it-when-needed/35418194#35418194

[markerikson]

Thanks for the links. I'm hoping to have some time to throw together a first draft sometime this week.

[markerikson]

Here's an initial draft outline for the FAQ page:

• Reducers
  • How do I share state between two reducers?
  • Do I have to use combineReducers?
  • Do I have to use a switch statement to handle actions?
• Organizing State
  • Do I have to put all my state into Redux? Should I ever use React's setState?
  • Can I put functions, promises, or other non-serializable items in my store state?
  • How do I organize nested/duplicate data in my state?
• Store Setup
  • Can I / should I create multiple stores?
  • Is it OK to have more than one middleware chain in my store enhancer?
  • How do I subscribe to only a portion of the state?
• Actions
  • Why should my action types be constants?
  • Why should "type" be a string, or at least serializable?
  • Should I have a 1-1 mapping between reducers and actions?
  • How can I represent "side effects" such as AJAX calls?
  • Should I dispatch multiple actions in a row from one action creator?
• Code Structure
  • How should I group my actions and reducers in my project?
  • Where should my selectors go?
• Performance
  • Won't calling "all my reducers" for each action be slow?
  • Do I have to deep-copy my state in a reducer? Isn't copying my state going to be slow?
  • How can I reduce the number of store update events?
  • Will having "one state tree" cause memory problems?
• React-Redux
  • Why isn't my component re-rendering, or my mapStateToProps running?
  • Why is my component re-rendering too often?
  • How can I speed up my mapStateToProps?
• Community
  • Are there any larger, "real" Redux projects?

The intent would be to give a reasonably short answer to each question, along with links to further reading. I would also want to write up a full page on structuring reducers, since that seems to be a topic worth a lot more detail.

Would appreciate suggestions, comments, critiques on this list.

[sompylasar]

Wow awesome list 👍

Tiny note from me:

Actions
Why should "type" be a string, or at least serializable?

I think the whole action objects should be serializable, not just "type".

And there is one more question: if a middleware requires "name", not "type", what should I do? I have this in mind: https://github.com/gajus/redux-convention

[gaearon]

Great stuff 👍

[markerikson]

I will take a thumbs-up from @gaearon as the signal to go ahead :)
I'll start trying to put this together. Progress will be over at https://github.com/markerikson/redux/tree/create-faq-page .

[markerikson]

Okay, semi-related issue. Cloned my fork, npm install, npm run docs:prepare, Gitbook installed. Ran npm run docs:build, and got an error:

Template render error: (D:\Projects\redux\docs\basics\ExampleTodoList.md) [Line 143, Column 21]
  expected variable end (In file "docs/basics/ExampleTodoList.md")

Looking at it, it's a code sample that's doing inline styles, and thus has a style={{someObject}} chunk in it. Adding spaces between the curly braces fixed it. Also had the same error in UsageWithReact.md line 123. Fixing both of those allowed Gitbook to build the docs correctly.

Any particular reason why this hasn't noticed and fixed already by someone else? I'd expect it to actually have blocked major edits to the docs.

[markerikson]

Argh. Um. One more question: the CONTRIBUTING page says to use typography stuff like smart quotes. I'm trying to follow suit and do so, but the result isn't coming out well. The resulting HTML is coming out as everyone's favorite Unicode diamond question mark characters instead. I've tried copying and pasting the smart quote characters from CONTRIBUTING.md, typing them in manually (I'm on Windows, so ALT+0147/0148), etc. They actually seem to render okay over at http://jbt.github.io/markdown-editor , but not in Gitbook's output. Is there some trick I'm missing to this?

[gaearon]

Looking at it, it's a code sample that's doing inline styles, and thus has a style={{someObject}} chunk in it. Adding spaces between the curly braces fixed it. Also had the same error in UsageWithReact.md line 123. Fixing both of those allowed Gitbook to build the docs correctly.

Interesting. Maybe a regression in Gitbook?
I am using Gitbook 2.4.3 (specified in book.json). I have plugins resolved like this:

info: install plugin edit-link from npm (gitbook-plugin-edit-link) with version 1.4.2 
info: >> plugin edit-link installed with success 
info: No version specified, resolve plugin prism 
info: install plugin prism from npm (gitbook-plugin-prism) with version 1.0.0 
info: >> plugin prism installed with success 
info: No version specified, resolve plugin github 
info: install plugin github from npm (gitbook-plugin-github) with version 1.1.0 
info: >> plugin github installed with success 

Any particular reason why this hasn't noticed and fixed already by someone else? I'd expect it to actually have blocked major edits to the docs.

Can’t reproduce it.

The resulting HTML is coming out as everyone's favorite Unicode diamond question mark characters instead.

Do you have the same problem on the current docs website?

[markerikson]

Yeah, NPM installed Gitbook 2.4.3 here as well.

Looking at redux.js.org, smart quotes render okay in my browser. Looking at the fresh build on my local box, smart quotes render okay in pages such as "Prior Art", but not in the FAQ page I was creating myself. Clearly there's something different about how I'm trying to use them.
I'll try this again tonight.

[gaearon]

For now, just do as you find convenient (i.e. you can work on FAQ from Github interface, not use smart qoutes, etc). We’ll prettify before merging.

[Dattaya]

@markerikson this is a great list 👏

Actions
Why should "type" be a string, or at least serializable?

I think the whole action objects should be serializable, not just "type".

In the answer we might want to note that an action could be unserializable initially, but should be serializable eventually after it's gone through a middleware chain.

More questions to consider:

• Middleware: What is the difference between using next and dispatch inside a middleware?
• Reducers: How to reuse a reducer? In the answer explain reducer factories like in real-world example and erikras/multireducer? Factories are more flexible because it's possible to create different action types for every new reducer?
• Big app/performance: How to load reducers dynamically? We can link to this answer for now
  http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application

[markerikson]

Got my initial progress over at https://github.com/markerikson/redux/blob/create-faq-page/docs/FAQ.md . Actual feedback on the content so far would be appreciated :)

@Dattaya : yeah, a couple of items on middleware might be useful also. As for the reducers, that stuff would go into the "Structuring Reducers" page I'm hoping to add as part of this rather than directly into the FAQ list itself.

[markerikson]

Been busy the last couple nights, so the pace has slowed down to one or two answers written up per evening. But, making progress - 11 questions down, 14 to go at the moment.

[gaearon]

How to display a modal in Redux:

http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680#35641680

[gaearon]

How to reset the state of a Redux store:

http://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store/35641992#35641992

[markerikson]

@gaearon , I'd kinda skimmed past your "action in timeout" and "multiple dispatch" answers previously, but just had a chance to look at them again. No kidding, those deserve to be a new docs page right there.

[kennetpostigo]

Just bringing it up because I see it asked alot and this is a FAQ 😅

[gaearon]

Just bringing it up because I see it asked alot and this is a FAQ 😅

Agreed.
Here’s a good article: https://auth0.com/blog/2016/01/04/secure-your-react-and-redux-app-with-jwt-authentication/

[markerikson]

Sure, valid point, and I have asked for feedback :) I'm not entirely against putting that into the FAQ, but at the moment I would say it's less of a priority because it's not concerned with core Redux behavior. It's also a topic I'm not nearly as familiar with myself. If you or someone else had time to write it up, though, I'd totally take it as a PR against the branch I'm working on in my fork.

[kennetpostigo]

I would love to help out and do that. Can you make the initial FAQ so I can structure what I put so that it matches with what you are going to write up?

[markerikson]

Yep. Re-pasting the link, the current WIP is at https://github.com/markerikson/redux/blob/create-faq-page/docs/FAQ.md . Basic format is a couple paragraphs explaining the answer in general, followed by 3-4 links to relevant Redux docs, issues, SO questions, or other relevant articles.

[kennetpostigo]

Okay I'll get to it.

[kennetpostigo]

@markerikson Made some changes you should have received a notification.

[gaearon]

Difference between Backbone and Redux: https://news.ycombinator.com/item?id=11187727

[markerikson]

Yeah, could maybe toss that in along with a "When should I use Redux?" question.

Doing some traveling tomorrow. Will see if I can crank out a few more answers during the trip.

[gaearon]

Doing some traveling tomorrow.

I read that as “doing some time traveling tomorrow”. 😂

[markerikson]

Well, given that I'm crossing a couple time zones, that's not entirely inaccurate... :)

[gaearon]

This is probably already in the FAQ but I wrote again about combineReducers(): http://stackoverflow.com/a/35674297/458193

[gaearon]

How to dispatch different actions depending on the route? http://stackoverflow.com/questions/35665724/with-react-redux-router-how-should-i-access-the-state-of-the-route/35674710#35674710

[markerikson]

Still cranking away on this. Got to 14 of 26 questions answered as of this evening, but then added two more to be answered ("When should I use Redux?" and "How many components should I connect?").

If anyone else would like to chip in, PRs still totally welcome :)

[markerikson]

Getting there. Spent most of the day on this, and I'm up to 23 of 29 questions complete. Might actually get the initial writeup completed within the next day or two.

[markerikson]

And there we go - all current 29 questions in the outline have answers written up.

Can I get some feedback on the current writeup before I submit a PR?

[gaearon]

PR is an easier way to get feedback 😉
Great job.

[markerikson]

Sure. In the interest of keeping the history a bit cleaner, I'll try creating a second branch that has the content, but only one commit (unless you'd rather I just submit the PR as-is)

[gaearon]

No big deal about it, do anyhow you like. We barely make any source changes at this point so we don’t care much about clean history.

[markerikson]

Heh. Well, it's up - #1489.

[markerikson]

Related observation: it'd be nice to be able to link directly to certain questions once this is published in the docs. I know you can link to headings in Github Markdown, and Github provides those nice on-hover anchor icons to be able to copy the relative links. I see that Gitbook does add ID tags to headers, such as "#is-there-always-a-1-1-mapping-between-reducers-and-actions", but there's no easy way to copy that. Would adding something like https://github.com/rlmv/gitbook-plugin-anchors to Redux's Gitbook setup be a good idea?

[mkozhukharenko]

@markerikson, you are doing a great job! I've found a lot of answers and useful links in your FAQ.

[markerikson]

So. The core FAQ page is finally published. Per my last comment, it'd be nice if we could get easily-copyable anchors or shortcuts or something. Also up for discussion of further edits and improvements, like adding a ToC or splitting it up into sub-pages.

Thoughts/suggestions?

[gaearon]

This often comes up: http://stackoverflow.com/questions/36316885/react-container-structure-purely-a-wrapper-or-more/36317201#36317201

[gaearon]

The FAQ is great. I think I already see less people asking the same questions. Let’s keep it up as it is for a while. You’re a collaborator so you should be able to reorganize it freely as you see fit. I made some minor stylistic edits in #1567 so if you can maintain those while changing things, it would be rad, but if not, not a big deal 😄 . I very much appreciate your work on this!

[markerikson]

Sure. I'm putting together a Table of Contents right now, with shortened anchors to making linking to each question easier.

One question: per my earlier comments, I had trouble getting smart quotes and other typographical niceties to render properly for some reason. How are you going about entering those?

[gaearon]

Hmm. I’m usually editing markdown right in my editor and only view the result before publishing.

[markerikson]

Right, but how are you actually typing them in? I'm on a Windows box, and tried both copying and pasting smart quotes from other docs files into this one, and also using ALT+somenumber to enter them. The values looked okay in Markdown, but not in the output. Maybe I had my text editor set to a bad codepage or something?

[gaearon]

I’m on OS X which has different shortcuts. Could it be that you only had problems locally? I think I’ve seen this happen occasionally. Maybe you could try testing them in GitHub Preview. (or in this comment field :-)