FAQ updates

[markerikson]

Summary

I did the initial grunt work of writing the FAQ. @gaearon did some editing, I added the TOC and the short question links, and it's been a great resource so far. Since then, I know @gaearon has pointed to a number of discussions and articles as being FAQ worthy, and I have a bunch of backlogged bookmarks and updates I need to sort through. Let's try to list any topics, links, or items we feel need to be added or updated.

Update

I added the updates to existing questions, but am currently focused on other tasks. If anyone is interested in helping write the "new" entries, I'd be happy to work with them regarding info, content, and editing!

Waiting to be Added

New topics

General

• When should I learn Redux?
  • https://twitter.com/dan_abramov/status/739961787295117312
  • https://twitter.com/dan_abramov/status/739962098030137344
  • https://github.com/markerikson/react-redux-links/blob/master/basic-concepts.md
• What are pros and cons of using Redux?
  • Redux 4 breaking changes #1342 (comment)
• How does Redux compare to [Backbone, Angular, MobX]?
  • Redux vs a global variable
    • https://news.ycombinator.com/item?id=13334978

Code Structure

• Reusable / encapsulated logic/modules?
  • https://github.com/markerikson/redux-ecosystem-links/blob/master/component-state.md
  • https://github.com/markerikson/react-redux-links/blob/master/redux-techniques.md#encapsulation-and-reusability
  • http://randycoulman.com/blog/
  • https://github.com/slorber/scalable-frontend-with-elm-or-redux
  • http://www.webpackbin.com/VkHniHP6b
• Where should websockets and other persistent connections live?
  • In middleware. See existing examples at https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware-sockets-adapters.md

Performance

• Pagination/caching?
  • http://stackoverflow.com/questions/33940015/how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and-pagina
  • Cache API: invalidation, expiration, refresh, clean, TTL, LRU... facebook/relay#720 (comment)
  • https://twitter.com/acemarke/status/804071531844423683
  • https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
  • Related to existing "state tree size" question

Design Decisions

• Why does Redux separate out actions and updates? Why not just update state directly?
  • https://stackoverflow.com/questions/43640464/why-we-decouple-actions-and-reducers-in-flux-redux-architecture
  • https://medium.com/@mark.erikson/ill-repeat-a-comment-i-ve-made-several-times-now-b4ead0b57a95
  • https://news.ycombinator.com/item?id=14550588

React-Redux

• Why use React-Redux?
  • https://www.reddit.com/r/javascript/comments/6hperk/i_use_react_and_redux_but_never_reactredux_what/dj0fywb/

Other

• Fit these diagrams in somewhere? Docs need one or more diagrams #653
• "FAQ-worthy" mentions:
  • Performance issues with large collections #1751
  • Same action for different state parts #1628
  • How to chain async actions? #1676
  • https://twitter.com/dan_abramov/status/732543424356864001
• Boilerplate/verbosity:
  • https://twitter.com/dan_abramov/status/813860965477392385

Updates to Existing Questions

• When should I use Redux?
  • https://dev.to/dan_abramov/comment/1n2k
• Where should I put "business logic" ?
  • https://twitter.com/FwardPhoenix/status/952971237004926977
  • Discussion: Gaining clarity on "business logic" for FAQs #2796

It's not an FAQ item, but I'll leave a note for myself here rather than filing a new issue. The "Beyond combineReducers" page should have a mention of "double-nesting state", as in state.posts.posts, usually due to initial state defining a key and the slice reducer being given a key. . Definitely a common mistake.

Completed

New Topics

Immutability

• Do I have to use Immutable.js?
  • https://www.reddit.com/r/javascript/comments/4rcqpx/dan_abramov_redux_is_not_an_architecture_or/d51g4k4?context=3
  • https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md#immutability-and-react
  • https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#immutable-data
• Why should data be handled immutably?
  • http://stackoverflow.com/questions/37531909/redux-why-is-avoiding-mutations-such-a-fundamental-part-of-using-it
  • http://stackoverflow.com/questions/35970515/how-is-state-immutability-actually-used-in-redux

Updates to existing questions

• When/why to use Redux?

  • https://twitter.com/dan_abramov/status/733742952657342464
  • https://twitter.com/dan_abramov/status/732912085840089088
  • https://twitter.com/dan_abramov/status/725089243836588032
  • https://twitter.com/dan_abramov/status/737036433215610880
  • http://stackoverflow.com/questions/36631761/when-should-i-add-redux-to-a-react-app
  • https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.8qxj336yv
  • http://stackoverflow.com/questions/39260769/redux-vs-plain-react/39261546#39261546
  • https://twitter.com/dan_abramov/status/802564042648944642
  • https://www.reddit.com/r/reactjs/comments/5exfea/feedback_on_my_first_redux_app/dagglqp/
  • http://stackoverflow.com/questions/39260769/redux-vs-plain-react/39261546#39261546
  • https://twitter.com/acemarke/status/793862722253447168
  • https://twitter.com/dan_abramov/status/801489026687651840

• Redux state vs React state:

  • https://discuss.reactjs.org/t/redux-and-global-state-vs-local-state/4187/8
  • http://stackoverflow.com/questions/35328056/react-redux-should-all-component-states-be-kept-in-redux-store/35328862#35328862
  • https://www.reddit.com/r/reactjs/comments/4w04to/when_using_redux_should_all_asynchronous_actions/d63u4o8
  • https://twitter.com/dan_abramov/status/749710501916139520
  • https://twitter.com/dan_abramov/status/736310245945933824

• Serializable store data:

  • React Elements in Redux state (docs/discussion) #1793

• Nested data:

  • Treeview example: Add tree view example #1269
  • http://stackoverflow.com/questions/32798193/how-to-handle-tree-shaped-entities-in-redux-reducers
  • Normalising state and garbage collection #1824
  • http://stackoverflow.com/questions/38012852/users-sees-one-part-of-deeply-nested-state-should-visible-properties-be-at-top/38017227#38017227
  • https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f

• Actions:

  • some of the links mentioned in Simpler introduction to async action creators #533 ?
  • Batched actions: https://github.com/manaflair/redux-batch

• File structure:

  • http://stackoverflow.com/questions/37111300/redux-why-not-put-actions-and-reducer-in-same-file/37116923
  • Folder organization of components vs containers #1618
  • Application Structure react-boilerplate/react-boilerplate#27
  • dispatching in componentWillMount react-redux#210 (comment)

• Scaling:

  • http://stackoverflow.com/questions/34782249/can-a-react-redux-app-really-scale-as-well-as-say-backbone-even-with-reselect
  • Completely rewrite connect() to offer advanced API, separate concerns, and (probably) resolve a lot of those pesky edge cases react-redux#407
  • Rewrite connect() for better performance and extensibility react-redux#416
  • http://stackoverflow.com/questions/37264415/how-to-optimize-small-updates-to-props-of-nested-component-in-react-redux
  • http://somebody32.github.io/high-performance-redux/
  • connect could be used with a custom store.subscribe method provided as option react-redux#269
  • Performance issues with large collections #1751
  • https://twitter.com/dan_abramov/status/720219615041859584

• Multiple re-renders:

  • Addresses #959 without affecting the library's existing functionality… #1813
  • https://github.com/manaflair/redux-batch

• Where does business logic live?

  • Recommend that Action constants be named in the past tense #384 (comment) (the more that's in the reducers, the more you can edit and replay via time-travel)
  • http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/#thick-and-thin-reducers

• Multiple dispatches

  • https://twitter.com/intelligibabble/status/800103510624727040
  • https://twitter.com/dan_abramov/status/800310164792414208
  • http://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/#multiple-dispatching

• Why doesn't Redux pass the state to subscribers?

  • Is it possible to get action and state in store.subscribe? #580 and many, many more
  • Alternate Proof of Concept: Enhancer Overhaul #2214 (breaks debouncing)
  • Currently partly answered in "Store Setup". Will have to decide where this goes.

• Why doesn't Redux use classes for actions and reducers?

  • Recommendations for best practices regarding action-creators, reducers, and selectors #1171 (comment)

• Why does the middleware signature use currying?

  • Middleware all the things #55, middleware - Why currying rather than (store, action, next) ->  #534, Revised middleware-declaration function's interface #784, Proposal: add subscribe to middlewareAPI #922, RFC: Simplify middleware signature #1744

• Why does applyMiddleware use a closure for dispatch?

  • remove initial assignment of dispatch in applyMiddleware to make it more expressive #1592
  • Question about middlewareAPI #2097

• combineReducers recursion / limitations?

  • Feature Request: Allow reducers to consult global state #1768 et al

• Why doesn't mapDispatch allow use of getState or mapState return values?

  • Add state as the third parameter to mapDispatchToProps react-redux#237

• Will having "one state tree" cause memory problems?

  • https://stackoverflow.com/questions/39943762/can-a-redux-store-lead-to-a-memory-leak/40549594#40549594
  • https://stackoverflow.com/questions/42489557/redux-and-all-the-application-state/42491766#42491766
  • https://stackoverflow.com/questions/44956071/memory-usage-concern-with-controlled-components?noredirect=1&lq=1

• Why use action creators?

  • https://www.reddit.com/r/reactjs/comments/54k8js/redbox_redux_action_creation_made_simple/d8493z1?context=4
  • http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/

[gaearon]

Also this seems popular and non-obvious.

https://twitter.com/dan_abramov/status/736310245945933824

[markerikson]

Saw that image, and I'm only partially following what's going on there. Or rather, I see the code, I'm just not quite understanding the intent or the statement.

Is the intent that you're rendering a "connected-like" component, except that the "dispatch" and "reducing" is actually just updating the parent component state?

I'm also not understanding the bit about "detaching" the reducer, since there's no actual store or use of store.replaceReducer() in that snippet. You just mean that a "reducer-like" function can be applicable outside the context of the store's reducer structure?

[markerikson]

New possible FAQ section, or possibly design doc: "Why Redux is designed the way it is". Example topics: why store.subscribe() doesn't include the action or state as an argument, why middleware is a nested function, etc.

[sompylasar]

Saw that image, and I'm only partially following what's going on there. Or rather, I see the code, I'm just not quite understanding the intent or the statement.

Is the intent that you're rendering a "connected-like" component, except that the "dispatch" and "reducing" is actually just updating the parent component state?

I'm also not understanding the bit about "detaching" the reducer, since there's no actual store or use of store.replaceReducer() in that snippet. You just mean that a "reducer-like" function can be applicable outside the context of the store's reducer structure?

The idea is: you don't need the redux library with the dedicated store object to implement redux architecture of (prevState, action) => nextState. The React component state can be your store, local to the component, and you implement dispatch yourself by doing state updates via React setState.

[markerikson]

Yeah, that's sorta what I thought I was seeing. It was the "detach" phrasing that was really throwing me, because I'm aware you can actually call store.replaceReducer().

[yjcxy12]

Regarding splitting logic between action creators and reducers, I think it's worth to point out that selectors(mapStateToComponent) is another good place to handle these(validation, data transform). This creates nice separation between true source from server (reducer) and view-related data that is computed (transformed or filtered) by source (selector).

Another question I see often is how to make a redux module(action creators, reducers, components) that can be reused externally. Mainly how to avoid action name clashing when we have multiple module with same type in the same page, and how to determine reducer name so it can be used by createStore.

[markerikson]

Yeah, we definitely need a "Design Decisions" section of the FAQ.

[markerikson]

Question for @reactjs/redux : I'm debating potentially splitting the FAQ up into separate pages per topic. The current single page is pretty long. Any opinions?

[ellbee]

I do like having a list of links to all the questions on the Table of Contents. If we keep that I can't see that there are any downsides to splitting the topics onto different pages.

[markerikson]

Yeah, I'd definitely keep FAQ.html to have the complete TOC, and then probably have a separate TOC within each page for just its entries.

[jimbolla]

The best way to organize them is probably whatever would produce the best results for someone doing a google search for a relevant question.

[markerikson]

Starting in on this task. Plan is to go ahead and split it up based on the current categories, then update the existing questions, and finally write the new material.

[JeffBaumgardt]

I would like to know more about store enhancers. And injectable reducers for code splitting. The examples of both are quite limited and difficult to follow.

[markerikson]

@Medros : Hmm. Both interesting topics, but maybe not so much "Frequently Asked Questions".

There was a good discussion about store enhancers on Twitter a few weeks ago: https://twitter.com/acemarke/status/778813095221170176 . Basically, they're semi-deliberately not called out in the docs right now since they're very much a power user feature, and there's some work in progress to change the internals related to them. The discussion at #1813 talks about them some, and the relevant rework issue is #1702 .

For injectable reducers, you might want to look at how https://github.com/mxstbr/react-boilerplate and https://github.com/davezuko/react-redux-starter-kit do things. There's also a variety of libraries related to component state and reducer management in my Redux addons list that may be relevant.

[markerikson]

Good progress today. Split up the FAQ into separate pages per category, did about half of the planned updates to existing questions. I'll try to knock the rest out tomorrow.

[markerikson]

And the "split+update" part is now in (see #2009 ).

I've got a few other things I'd like to do before tackling the new questions, so I'll leave this open for now. Probably come back to this in a couple weeks.

[bundance]

Happy to help write some of these up for you. Any thoughts on the best place to start?

[markerikson]

Hiya, and thanks!

In terms of how frequently stuff is actually asked, adding a new "Design Decisions" category would be most relevant. That said, that also jumps right into some fairly technical aspects.

An easier place to start might be adding a few new questions to the "General" section. The ideas I have listed at the moment are "When should I use Redux?", "What are the pros and cons of using Redux?", and "How does Redux compare to [Angular/Backbone/MobX]?".

That said, if there's a particular question that catches your eye, that works too. There's no particular deadline we're trying to hit, just a bunch of questions I've seen that I'd like to actually have covered in the FAQ.

I'm happy to work with you on what direction these answers should go, editing, and links to further info, I'm just primarily focused on writing a blog post series at the moment and trying to write the FAQ stuff myself is on the back burner for me until that's done.

[bundance]

OK, that sounds good. Why don't I start with When/why to use Redux and Redux state vs React state. Do you want me to write a draft and add a new PR for you to review, or do you have some other process you prefer to use?

[markerikson]

Ah... sorry, let me clarify what that first comment is trying to lay out.

My goal was to add additional links and info to existing questions, and then write new questions+answers. I've already finished everything under the "Updates to existing questions" heading, ie, the "add new links" part. It's the "write new questions+answers" part that I'm looking for help with at the moment.

The list of potential new questions is under the "New Topics" heading (starting with "When should I learn Redux?"). Anything listed under that section would be worth tackling.

As for workflow: you'd want to fork the Redux repo, create a branch, and start working on your drafts. Could probably post a link to the WIP file(s) here first, and then once you think you have a draft ready, file a PR.

[bundance]

OK, I'll start with Do I have to use Immutable.js?. I've just finished writing a series of tutorials on Immutable, and I use it daily, so I'm very familiar with the issues surrounding its use.

[markerikson]

Sounds good! The linked comment on Reddit is my own thoughts about some of the tradeoffs. I also just added pointers to the relevant sections of my React/Redux links list, on immutable data and React perf, as additional resources.

The "Immutable.js" question probably belongs in a new category, but not sure what that category should be at the moment. Maybe create an "Immutable Data" category for the moment in your branch, and start writing in that page?

[bundance]

@markerikson First PR is now ready for review: #2120

[maxhallinan]

@markerikson I'm interested in working on this. Is it okay if I take the "Why use action creators?" item. Happy to start elsewhere if that is better for you.

[markerikson]

@maxhallinan : yep, that'd be great! Go ahead and put together a draft for a new FAQ question, file a PR, and we can tweak it there. Thanks!

[Pk-T]

@markerikson I am interested too, Is there something in your mind I can start with, which is also commonly required by the community?

[sbakkila]

@markerikson I made a PR for the FAQ section on design decisions #2528

[markerikson]

@sbakkila : Great, thanks! I'll try to look at it tomorrow night or Wednesday.

@Fyre91 : sorry for not getting back to you faster. Anything up there in that list that hasn't been mentioned in the last few comments is fair game :) If you want a couple suggestions to start with, you could work on the "Updates to Existing Questions" items I have listed for the "one state tree" and "multiple dispatches" questions.

[maxhallinan]

@markerikson I'm sorry this took so long. I've opened PR #2535 for "Why should I use action creators?"

[maxhallinan]

I also opened PR #2537 to add links to the Actions FAQ section. FWIW, the other links that are listed for update in this issue description seem to be added already. Otherwise, I would have included them with this PR.

[maxhallinan]

I was thinking of moving on to "When should I learn Redux?" Is this question specifically with regards to React? Otherwise, it seems that you should learn Redux when you should use Redux, which would overlap with the already answered "When should I use Redux?".

[markerikson]

@maxhallinan : Eh, it's sort of in regards to React. And yeah, there's some overlap with "When should I use Redux?", but I think it's distinct enough to warrant its own FAQ entry.

[Pk-T]

@markerikson OK i will take up one state tree performance FAQ.

[markerikson]

@Fyre91 : cool, thanks!

[maxhallinan]

@markerikson Ok, sounds good. I'm taking "When should I learn Redux?".

[sbakkila]

@markerikson I'm going to take 'Why use React-Redux' next.

[maxhallinan]

@markerikson I'm taking the pagination/caching item under Performance next. Just to confirm, the actual question is "Can I cache paginated data without causing memory problems?"

[markerikson]

@maxhallinan : roughly, yeah. The other trains of thought were maybe things like "How do I implement cache checks?", "How do I handle clearing cached data?", "How much can I safely cache in memory?", etc.

To be honest I don't remember exactly what I was thinking when I wrote that item, but that's what those links cover. I also just added a link to a great post on tracking subsets of normalized data.

This could easily turn into multiple separate question entries if we feel like it needs it, and I'm not as sure exactly what I want to see out of it. Take a stab at the topic, see what you come up with, and we'll work from there.

[markerikson]

I just updated the list at the top of the thread to reflect what's been worked on recently. (Actually, y'know... I really shoulda made it a checkbox todo list from the start, instead of cutting and pasting completed stuff into a second section. Oh well.)

Great to see the list of stuff remaining getting smaller!

[gribnoysup]

@markerikson Updates to Existing Questions: Performance is already in master :)

[maxhallinan]

@markerikson "Why use action creators?" is also in master.

[markerikson]

@gribnoysup , @maxhallinan : ah, yes, so they are :) Updated the list.

Definitely getting there. Looks like all the updates to existing questions are done, and there's just a few new items left.

[markerikson]

Just came up with a new "Design Decisions" question: "Why does Redux separate out actions and updates?"

[timdorr]

I think we're good on this. We can track individual FAQ updates in other issues.