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

[markerikson]

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]

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

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

[markerikson]

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]

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

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

[markerikson]

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

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

[markerikson]

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]

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]

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]

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]

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]

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})
);