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.