locked
redux middleware recommondations RRS feed

  • Question

  • User1034446946 posted

    Hi

    after setting up react with the build in hooks it appears redux doesn't support cross tab state out of the box, so i am going to need middle ware and I am looking for recommendations, i am also going to do things like remember the user is there are any recommendation for middleware which does this it would also be appriciated.

    Will i still be able to use react hooks using the middleware or will have have to use the middleware components?

    Saturday, September 7, 2019 12:56 PM

Answers

  • User-474980206 posted
    Cross tab is a projection of state, not part of the state itself. Not sure of your desired usage or why middleware would be involved. You appear to be confusing persistent state (remember me) with component state. Middleware can be used to bridge persistent state with redux. Google for examples of redux to localstorage.

    As redux does not use react hooks, the middleware has no effect. Hooks are for lifecycle event progressing when using pure functions rather than classes for components. As redux was always pure, you typically used HOCs rather than classes. Redux now supplies it’s own hooks which can be used instead of connect and HOCs.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, September 7, 2019 4:48 PM

All replies

  • User-474980206 posted
    Cross tab is a projection of state, not part of the state itself. Not sure of your desired usage or why middleware would be involved. You appear to be confusing persistent state (remember me) with component state. Middleware can be used to bridge persistent state with redux. Google for examples of redux to localstorage.

    As redux does not use react hooks, the middleware has no effect. Hooks are for lifecycle event progressing when using pure functions rather than classes for components. As redux was always pure, you typically used HOCs rather than classes. Redux now supplies it’s own hooks which can be used instead of connect and HOCs.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, September 7, 2019 4:48 PM
  • User1034446946 posted

    the remember me was an after thought tbh.

    i thought state would be shared accros tabs, so if i had two the same form in multiple tabs i would have to allow my state to accomodate that, if i wanted to store using information like time and culture codes i would get it and store it once across all tabs

    back to this framework thing, i am using useDispatch and useSelector which are from 'react-redux' so i guess i am using redux hooks, need to keep reminding myself.

    Saturday, September 7, 2019 8:51 PM
  • User1034446946 posted

    after getting other replies i think i can just get all the errors outside the loop and travse through them in another function which would be inside the loop,i thought it was like a database when you only want to return 1 record but i am getting use to it being 1 object

    Saturday, September 7, 2019 9:00 PM
  • User-474980206 posted
    As you are using redux, you should look at redux-forms. The current version is a HOC model, but their is an alpha hooks version, even if you don’t use the library, viewing the source code will explain a lot about form and validation handling.

    https://github.com/erikras/redux-form
    Tuesday, September 10, 2019 4:59 PM
  • User1034446946 posted

    thanks will take  a look.

    Have looked a little at hoc's is it a bit like abstract functions in c#? or am i miles off? i haven't found a reason to use them yet but i haven't done anythingcomplicated yet.

    Tuesday, September 10, 2019 8:02 PM
  • User-474980206 posted

    HOC's are key to functional programing, and code reuse. in redux connect() is used to create a HOC from any react component. almost any react form package will use HOC's to enhance the react input components.

    to get very far in react you should understand HOC's. there are a some caveats to using HOC's with react components (due to property management). Hooks are technique to avoid HOC's in may cases.

    read this on HOC and hooks:

    https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58

    Wednesday, September 11, 2019 4:10 AM
  • User1034446946 posted

    thanks for the info, i get what HOC's are a the basic level, I also get what hooks are on a basic level, but think I am miles off full understanding them.

    i think i need to find some more complicated examples and implement them to understand it fully.

    thanks for all the help.

    Wednesday, September 11, 2019 9:50 AM