4 ms·

After an horrific redux experience in a large app, I recently had to set it up on a new project, and was pleasantly surprised. Granted, everything so far has be

After an horrific redux experience in a large app, I recently had to set it up on a new project, and was pleasantly surprised. Granted, everything so far has been synchronous, but hooks makes for a lot less boilerplate. Haven't even bothered with action creators, just dispatch stuff.

acemarke 7y ago
Can you give details on the "horrific experience"? What kinds of problems did you see? Also, see the other comment I left for discussion on using Redux Starter Kit to simplify that code ( https://news.ycombinator.com/item?id=20501773 https://news.ycombinator.com/item?id=20501773 ).
- kansface 7y ago
  > What kinds of problems did you see? A unique action generator, action type, and reducer for every endpoint is the common failure mode (probably because thats what the docs do). Also, the react-redux bindings are a truly horrific API - only call connect where you absolutely must (you can can actually call dispatch on the store if you have a reference).
  - acemarke 7y ago
    Why do you feel that React-Redux has a "horrific API"? You might want to read my "History and Implementation of React-Redux" post [0] to understand why `connect` is written the way it is, as well as watch my recent talk "A Deep Dive into React-Redux" [1]. FWIW, we do now have a hooks-based API as well [2]. Do you feel that looks any better? In general, we recommending connecting _more_ components for better performance [3], and recommend _against_ importing the store directly [4]. [0] https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/ https://blog.isquaredsoftware.com/2018/11/react-redux-histor... [1] https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/ https://blog.isquaredsoftware.com/2019/07/blogged-answers-th... [2] https://react-redux.js.org/api/hooks https://react-redux.js.org/api/hooks [3] https://redux.js.org/faq/react-redux#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree https://redux.js.org/faq/react-redux#should-i-only-connect-m... [4] https://redux.js.org/faq/store-setup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself https://redux.js.org/faq/store-setup#can-or-should-i-create-...
    - wilsonrocks 7y ago
      I find connect quite verbose for a simple 'I want this component to be able to access the userName field' use case. However the hooks api is excellent for this. You can also write custom hooks that pull data from redux and other sources (in my case, root level props passed from another(angular) app, that I made available using Context.
    - kansface 7y ago
      > Why do you feel that React-Redux has a "horrific API"? `connect()` is a function that takes 4 optional arguments. The first one is a function, the second is an obj or a function that returns an object, the third is a function that takes 3 arguments that returns an object, the last is an options object that takes up to 7 params (four of which are functions)! Unfortunately, you aren't done yet, because connect returns a function! You pass your new function a component and it returns a different one. Now, you have something you can use! That is the most complicated interface I've ever seen in any library. `connect` makes code much harder to understand for what seems to be a simple task - wire some data into a component when the data changes. > Do you feel that looks any better? Yeah!
- wilsonrocks 7y ago
  Well, bear in mind that partly, it was horrific because I was new to it, and it was very much in at the deep end. * inconsistently named action creators defined in the same file(sometimes) as the actions * confusing tests that I still don't understand * the main focus being on axios requests handled in reducers rather than reducers themselves * the two main reducers being updateData (which merged in object into the store and saveData which fired off the axios request, and every component had to implement custom logic around using these two. Connects everywhere (which a child comment warns against!) Don't think anyone working on it had made any one decision badly - just a combination of using a new tech in a slightly non standard setting, deadlines, and a strange backend integration. Also, I don't think any of it was Redux's fault. That link looks good, thank you, will try it out and see if it is similar to what I came up with on my own for this new project. Edited for spacing
  - acemarke 7y ago
    Oh dear. Yeah, that does sound pretty painful to work with. My sympathies :( I do strongly disagree about the "`connect`s everywhere" thing, though. We generally recommend connecting more components, not just a few at the top.

acemarke 7y ago

Can you give details on the "horrific experience"? What kinds of problems did you see? Also, see the other comment I left for discussion on using Redux Starter Kit to simplify that code ( https://news.ycombinator.com/item?id=20501773 https://news.ycombinator.com/item?id=20501773 ).

kansface 7y ago
> What kinds of problems did you see? A unique action generator, action type, and reducer for every endpoint is the common failure mode (probably because thats what the docs do). Also, the react-redux bindings are a truly horrific API - only call connect where you absolutely must (you can can actually call dispatch on the store if you have a reference).
- acemarke 7y ago
  Why do you feel that React-Redux has a "horrific API"? You might want to read my "History and Implementation of React-Redux" post [0] to understand why `connect` is written the way it is, as well as watch my recent talk "A Deep Dive into React-Redux" [1]. FWIW, we do now have a hooks-based API as well [2]. Do you feel that looks any better? In general, we recommending connecting _more_ components for better performance [3], and recommend _against_ importing the store directly [4]. [0] https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/ https://blog.isquaredsoftware.com/2018/11/react-redux-histor... [1] https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/ https://blog.isquaredsoftware.com/2019/07/blogged-answers-th... [2] https://react-redux.js.org/api/hooks https://react-redux.js.org/api/hooks [3] https://redux.js.org/faq/react-redux#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree https://redux.js.org/faq/react-redux#should-i-only-connect-m... [4] https://redux.js.org/faq/store-setup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself https://redux.js.org/faq/store-setup#can-or-should-i-create-...
  - wilsonrocks 7y ago
    I find connect quite verbose for a simple 'I want this component to be able to access the userName field' use case. However the hooks api is excellent for this. You can also write custom hooks that pull data from redux and other sources (in my case, root level props passed from another(angular) app, that I made available using Context.
  - kansface 7y ago
    > Why do you feel that React-Redux has a "horrific API"? `connect()` is a function that takes 4 optional arguments. The first one is a function, the second is an obj or a function that returns an object, the third is a function that takes 3 arguments that returns an object, the last is an options object that takes up to 7 params (four of which are functions)! Unfortunately, you aren't done yet, because connect returns a function! You pass your new function a component and it returns a different one. Now, you have something you can use! That is the most complicated interface I've ever seen in any library. `connect` makes code much harder to understand for what seems to be a simple task - wire some data into a component when the data changes. > Do you feel that looks any better? Yeah!
wilsonrocks 7y ago
Well, bear in mind that partly, it was horrific because I was new to it, and it was very much in at the deep end. * inconsistently named action creators defined in the same file(sometimes) as the actions * confusing tests that I still don't understand * the main focus being on axios requests handled in reducers rather than reducers themselves * the two main reducers being updateData (which merged in object into the store and saveData which fired off the axios request, and every component had to implement custom logic around using these two. Connects everywhere (which a child comment warns against!) Don't think anyone working on it had made any one decision badly - just a combination of using a new tech in a slightly non standard setting, deadlines, and a strange backend integration. Also, I don't think any of it was Redux's fault. That link looks good, thank you, will try it out and see if it is similar to what I came up with on my own for this new project. Edited for spacing
- acemarke 7y ago
  Oh dear. Yeah, that does sound pretty painful to work with. My sympathies :( I do strongly disagree about the "`connect`s everywhere" thing, though. We generally recommend connecting more components, not just a few at the top.