[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
| // 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; |
| // 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}), |
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.
Jotting down a list of posts I'd like to write. Probably won't write them in this exact order.
[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
[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
Here's a sample scenario. Let's say we're using a "feature-first" folder structure based in /src, and we're trying to use index.js files to re-export files deeper in the hierarchy as a way of defining a sort of "public API" for a given feature folder. A sample of this might look like:
/features/A/ComponentA.jsx
export default ComponentA = () => (
<div>Component A</div>
);/features/A/actions.js
[6:34 PM] marekweb: I started using ES6 classes for my React components because ES6 is the new hotness and all that, but I'm realizing that I can't actually name any advantages, and I have to bind methods manually. So why use classes over React.createClass?
[6:34 PM] acemarke: a few reasons
[6:35 PM] acemarke: first, classes are an official part of the language
[6:35 PM] acemarke: second, that means that tooling understands the syntax
[6:35 PM] acemarke: third, createClass is eventually going to be deprecated
[6:36 PM] acemarke: there's various solutions to the method binding issue
[6:36 PM] acemarke: the suggested one is to use the "class properties" syntax, which isn't yet final, but I think may have recently hit stage 3
[6:37 PM] acemarke: ah... no, looks like it's still stage 2. Object spread hit stage 3, that's what I was thinking of
[6:37 PM] acemarke: that said, class properties are well supported in Babel, and used in tools like create-react-app
[
[7:53 PM] acemarke: webpack-dev-server is a dev server. Not an app server
[7:54 PM] acemarke: it's a compiler process
[7:54 PM] acemarke: more specifically, it's a small Express app that uses the webpack-dev-middleware and webpack-hot-middleware plugins
[7:55 PM] acemarke: it loads a Webpack config, creates a Webpack compiler instance, and passes that to webpack-dev-middleware
[7:55 PM] acemarke: WDM then passes an "in-memory filesystem" to the compiler, compiles your bundle into memory, and starts watching your source files on disk
[7:55 PM] acemarke: when the files change, it recompiles
[7:56 PM] acemarke: when a request for the bundle comes through Express, the middleware checks the request, sees that it matches the bundle name (or other output), and responds to the request with the in-memory file
[7:56 PM] acemarke: if you've got a backend app server, you can set up WDS to proxy other requests to that
[7:56 PM] acemarke: it's also entirely possible to w