News for hackers. Stuff that matters.
Re:Vue.js: the good, the meh, and the ugly by strken on Friday July 06, 2018 @12:55AM (#17468946)
> Not sure I follow that train of thought - could you point to an example?

Something like

  const store = createStore(...)
  export const dispatch = (action) => store.dispatch(action)
It removes the temptation to read directly from the store.

> `redux` and `react-redux` are deliberately separate packages

Yeah, my bad, got the import wrong.

> ...limits the reusability of your logic...

When would this become a problem, in practice? Reusable actions across different react/react-native UI, or multiple apps? Switching between user accounts? How common a use case is it?

Even if this is a constraint, I'm of two minds about whether a hack in isolation is worse than more complicated action boilerplate in general.

> ...and also makes it a lot harder to test...

This can be mitigated by Jest's mocks.

> https://github.com/markerikson/redux-starter-kit

That's really good. Unfortunately, it's not the same thing as bundling it with Redux proper.

Anyway, thanks for engaging with me. I never intended to do a deep dive into Redux's design, only to sympathise with stupidcar's comments about third-party state management, but it's interesting to hear the perspective of a maintainer.

Re:Vue.js: the good, the meh, and the ugly by acemarke on Friday July 06, 2018 @11:02AM (#17471953)
Sure. I'll toss in a few more thoughts here in response.

Your `dispatch` snippet could be simplified to just `const {dispatch} = store`, because the store isn't a class instance - it's a closure. However, I'm not sure why you'd feel a need to "remove the temptation to read directly from the store". In what scenario are you trying to dispatch actions (presumably from the UI), but not read any data?

A basic example of reusability is the unit testing scenario itself. Ideally, you want to minimize the amount of other app code that's getting pulled in, so you can test this one piece in isolation. A React component shouldn't "know" about a store at all - it should just be getting data and functions as props. Similarly, even async logic _should_ be testable in reasonable isolation. If you are directly importing a singleton store instance throughout the entire app, you're coupling all of your logic to that one instance.

Typical testing of store-related logic involves the `redux-mock-store` package, which is just similar enough to a real store to let code run, but records which actions have been dispatched. Similarly, if you do want to test a Redux-connected component and its pieces all together, you would normally provide a unique store or mock store instance there in the unit test - you don't want to drag in the rest of your codebase to test that one piece. (And sure, Jest has some pretty good mocking abilities, but not everyone's using Jest.) I've got some slides on standard Redux unit testing practices [0], and a large section on testing in my React/Redux links list [1].

Outside of testing, yes, reuse of React+Redux across multiple platforms is viable, as is sharing code in libraries. But, again, that only works if the store is effectively dependency-injected at runtime, and that's the point of how things like `connect()`, thunks, and sagas are set up.

I agree that a separate "starter" package isn't the same as putting that all in the core, but that's kind of the point. The starter kit depends on several other packages (`redux-thunk`, `immer`, `selectorator`, etc), while the core Redux library is tiny and standalone. The intent has always been to keep the core small, and let people build pieces on top of it. So, for this package, the specific goal is to help simplify the most common use cases and concerns I've seen, while still avoiding dictating the rest of their app design.

[0] https://blog.isquaredsoftware.com/presentations/workshops/re...

[1] https://github.com/markerikson/react-redux-links/blob/master...