Mark Erikson markerikson

[9:32 PM] sleepycat: @acemarke also, thanks for writing that stuff about action creators. That's really helpful.
[9:45 PM] sleepycat: @acemarke It feels like the patterns around Redux are still in flux (zing!). My impression is that people are expecting Dan to give them "the right answer™" while the more I read, the more it feels like this is a collective exercise in figuring it out.
[10:06 PM] acemarke: @sleepycat, getting back to your question: like I said, there's a whole bunch of different related responses to that
[10:07 PM] acemarke: one is that "boilerplate" and "too many files" are the most common complaints about Redux
[10:08 PM] acemarke: action creators are definitely "one more thing" to have to write
[10:08 PM] acemarke: and yeah, in the case of a trivial action creator that just immediately returns an action object, probably does seem unnecessary to a lot of people
[10:09 PM] acemarke: 2) While Dan (and Andrew) did a ton of work to put together Redux and wr

[9:48 PM] jake: Does anyone have a minute to help me think through setting up my actions? I think I'm falling into a rabbit hole of anti patterns.

I'm working on a React Native app. When the user logs in, I want to fetch some initial data from 3 different end points and this data ends up in 3 different (corresponding) reducers. However, the data is related. For example, two of the endpoints are essentially Events and Tags. Tags are accessed through events. So I need to get all events, then once that finishes, I need to iterate through those events and get all tags for each event. I'm not quite sure how to achieve this without accessing the state in my fetchInitialData action.
[9:49 PM] acemarke: so access the state? :)
[9:50 PM] jake: 😃 I stumbled upon this: http://stackoverflow.com/questions/35667249/accessing-redux-state-in-an-action-creator
which emphasizes "Accessing state in action creators is an antipattern and should be avoided when possible" so I was wondering if I'm appr

Jotting down a list of posts I'd like to write. Probably won't write them in this exact order.

Practical Redux series
- Connected lists, basic form editing
- Form change handling, feature reducers
- "editing/draft slice" approach
- Modal management and "picker" modals
- Handling more complex nested/relational data
- Entity creation
Treeview

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

[8:19 PM] Rtransat: What is the best way to set data in reducer after we put other data in other reducer?

For example I have a list of items in a reducer:

[{  
amount: 10  
}, {amount: 20}]

And another reducer with the value null by default and after fetching the first data in the store I want to calculate the sum of the total amount
[8:19 PM] Rtransat: and put it in a store too

[11:29 AM] acemarke: @user1 , @user2, @user3 : I've got articles on modals over here: https://github.com/markerikson/react-redux-links/blob/master/react-component-patterns.md#modal-dialogs . (Will have to add that "from scratch" article to the list)
GitHub
markerikson/react-redux-links
react-redux-links - Curated tutorial and resource links I've collected on React, Redux, ES6, and more
[11:29 AM] user4: What's React Fiber
[11:30 AM] user4: Whats up with these " Adverts "
[11:30 AM] user4: kinda of annoying in a way
[11:30 AM] acemarke: "adverts"?
[11:30 AM] user4: lol
[11:30 AM] user4: oh ur real

[8:27 PM] cquill: @acemarke Right, so many portions of the UI will be connected. But does each connected portion typically get its own container component? Seems verbose and redundant to have the following for each CRUD resource: UserList, UserListContainer, UserView, UserViewContainer, UserEdit, UserEditContainer, UserNew, UserNewContainer. Is there a simpler way?
[9:56 PM] acemarke: @cquill : this leads into one of my favorite (?) semi-rants, and one that I apparently need to write down so I can paste it
[9:57 PM] acemarke: A "container" component is simply any component whose primary job is to fetch data from somewhere, and pass that data on to its children
[9:58 PM] acemarke: With Redux, the wrapper components generated by connect are "container" components, since their job is to extract data from the Redux store
[9:58 PM] acemarke: I generally dislike the somewhat-common approach of trying to divide everything into a "components" folder and a "containers" folder
[9:59 P

[7:50 PM] acemarke: @jon.m : fwiw, I always have learned best when I had a project I was working on, and needed to implement some feature I'd never built before
[7:50 PM] acemarke: nothing motivates you to learn a particular concept or technology like needing it to build a feature
[7:50 PM] acemarke: ie, "learn generators" isn't terribly useful or motivating
[7:51 PM] acemarke: but "I need to make my async code easier to read / build a complex async logic feature, and Redux-Saga requires use of generator functions" is more of a specific motivation
[7:52 PM] acemarke: now, there's nothing wrong with going out and reading up on a specific feature - promises, generators, observables, etc
[7:52 PM] acemarke: always great to have more tools in the toolbox
[7:52 PM] acemarke: but ultimately you need something to apply those tools to
[7:52 PM] CPT: I agree. Having motivation helps
[7:52 PM] jon.m: I keep seeing this TreeHouse commercial on youtube that says a guy g

	// Option 1: a thunk action creator using redux-thunk middleware
	function myThunkActionCreator(someValue) {
	return (dispatch, getState) => {
	dispatch({type : "REQUEST_STARTED"});

	myAjaxLib.post("/someEndpoint", {data : someValue})
	.then(
	// Use the (resolve, reject) form of .then() instead of .catch(),
	// so that we don't accidentally dispatch REQUEST_FAILED on a reducer error
	response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),

	// See https://rainsoft.io/how-three-dots-changed-javascript/ for more detail on some of these

	// ES6 arrays

	// Array spread operator
	const newArray = [...oldArray, newItem];

	// Array destructuring
	const [first, second, ...everythingElse] = someArray;