Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Practical Redux, Part 6: Connected Lists, Forms, and Performance #11

Open
markerikson opened this issue Oct 5, 2020 · 11 comments
Open

Comments

@markerikson
Copy link
Owner

No description provided.

@markerikson
Copy link
Owner Author

Original author: Ioosth @Ioosth
Original date: 2017-01-12T07:46:52Z

Finnaly!! I was afraid that you forget about it :P
Thank you again!

@markerikson
Copy link
Owner Author

Original date: 2017-01-12T17:18:08Z

Heh. You're welcome, although I'm not sure what "it" you're referring to :)

@markerikson
Copy link
Owner Author

Original author: Ioosth @Ioosth
Original date: 2017-01-12T19:56:13Z

Sorry for my poor English! In comments below previous part you said that the sixth part should arrive around Christmas... but Christmas passed, New Year passed... so I was worried that you just abandoned this project. Now I'm happy that it wasn't true!

@markerikson
Copy link
Owner Author

Original author: Ioosth @Ioosth
Original date: 2017-01-12T20:02:32Z

One thing. Link for "Reselect repo" points to localhost?! ;)

@markerikson
Copy link
Owner Author

Original date: 2017-01-12T20:06:17Z

Oops, missed that one! I'll fix it this evening.

@markerikson
Copy link
Owner Author

Original date: 2017-01-12T20:09:24Z

Ah, gotcha. Yeah, I'm aiming for roughly a blog post every two weeks or so. During the Christmas break, I spent time writing the "Idiomatic Redux: Thoughts on Thunks" post, so that took up the next posting slot. After that was done, I resumed work on the Practical Redux series.

If you're interested, I have a list of the blog posts I plan to write here: https://gist.github.com/mar... .

@markerikson
Copy link
Owner Author

Original author: Richard Hoffmann @richardhoffmann
Original date: 2017-01-20T10:50:53Z

Mark, really... thank you for these awesome series of posts. This seems to be so much effort and is really helpful!

@markerikson
Copy link
Owner Author

Original date: 2017-01-21T15:58:26Z

Thanks, glad to hear it's helping! Yeah, I've been averaging probably 20+ hours per post in this series. 2-3 evenings of writing the original WIP code, most of a weekend to write the main content of the post (including going back through the "WIP" commits to produce the "final" cleaned-up branch), and another evening to do final editing and insert all the commit/file links.

So yeah, definitely sinking a lot of time into these. Hopefully the final product reflects the effort I'm putting into it, and based on the comments I'm getting, people do seem to think it's worth it :)

@markerikson
Copy link
Owner Author

Original author: Alexander Levchenko
Original date: 2017-03-13T16:34:25Z

Pleas if it's not very difficult could you explain how to avoid rerendering, with that shallow copy in <pilotslistrow>
pilot = {
...pilotModel.ref
};

@markerikson
Copy link
Owner Author

Original date: 2017-03-14T03:50:02Z

Actually, as written, the example _doesn't_ avoid re-rendering :) I'm making a new shallow copy of the "real" pilot JS object _every_ time `mapState` is run, so right now it _will_ actually re-render every time an action is dispatched.

There's several ways I could rewrite that `mapState` function to be more optimized and avoid re-rendering. One would be to use memoized selectors - maybe with an input selector that reads the pilot object, and the memoized function that puts together the copy if the input pilot object changes. Another might be to return `pilot` as one field, and `mechType` as a separate prop so that we don't have to create the copy.

Hopefully that helps clarify things. If you've got more questions, let me know!

@markerikson
Copy link
Owner Author

Original author: Alexander Levchenko
Original date: 2017-03-14T09:04:38Z

Thanks for the answer, I was trying to use memoized selector, but I did it with a simple createSelector. But now I realized that I can use createSelectorCreator and create customSelectorCreator which will use memoize function from lodash for an unbounded cache.
Like this:
import {createSelectorCreator, defaultEqualityCheck} from "reselect";
import memoize from 'lodash/memoize'
const customSelectorCreator = createSelectorCreator(memoize, defaultEqualityCheck);
export const selectPilot = customSelectorCreator(
pilot => pilot,
pilot => ({...pilot})
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant