4 ms·
I've thought about doing that. However, it doesn't really seem to play well with React's architecture. For instance, React does not have any built in support fo
by scriptkiddy 9y ago
I've thought about doing that. However, it doesn't really seem to play well with React's architecture. For instance, React does not have any built in support for computed properties. Therefore, if I am returning data from the central store through a function on a component that calls a getter from the store, the component will not update if the central state changes during the component's life cycle. Of course I could write a polling function or some sort of watcher method that binds the computed properties to component state, but that sounds like a mess. At a certain point after trying to get React to act more like like Vue, I have to ask myself why I'm not just using Vue in the first place.
Regarding you statement about abstraction layers, separation of concerns, and re-usability:
If I want a generic and re-usable component I just won't give it any data state. It may have local presentation state, but all data will be passed to it from a parent. Any operations the component allows will simply emit events. Both Vue and React are equally suitable for this and I have no complaints about either for generic components.
I'm not sure how being able to read central state in any component violates separation of concerns, however. The store is still handing all mutations to application state in Redux or Vuex. The difference with Vuex is that You do not need to have a chain of callbacks for dispatching actions, you do not need "connected containers", and you do not need to pass state through components in a tree that do not require that state. For instance, say I have a user profile page. This page displays user information received from a REST detail endpoint. Simple enough, right? I just have a `UserProfileContainer` where I define functions for fetching the user object from the API and then getters for retrieving that state. Now, I decide that I want to display a user's recent activities in a feed on the same page. Do I add to my `UserProfileContainer` to pass state down to the new feed component and it's children, or do I define the feed component as a new container? Or, do I define an intermediary `UserProfileLayout` component that is not a container and handles delegating state passed to it from the `UserProfileContainer`? If I do that I am passing application state through a component that has no use for it and I have to define an addional callback to propagate the event back to `UserProfileContainer`. Or maybe I should use `UserProfileContainer` itself to delegate state to the `UserInfo` and `UserFeed` components? How you compose this theoretical interface is probably defined by the structure of the rest of the application. I'm simply stating the Redux becomes more and more difficult to work with as the depth of component nesting increases.
- ng12 9y agoI'm not sure what your complaint is about computed properties. You should either store the computed data in the reducer, compute it on the fly in render, or use componentWillReceiveProps and/or setState. Your problem isn't needing to make React behave like Vue, you need to let React behave like React. The second point I was trying to make is you don't have to do it that way in React. React is a perfectly functional framework without Redux or the "container" model. That style became popular because you're enforcing that the majority of your components are dumb [1] which is a pretty useful thing for a large project. But again, these aren't problems with React and if it's giving you this much heartburn it's worth bringing up with your team because it sounds like something's going wrong. 1. https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 https://medium.com/@dan_abramov/smart-and-dumb-components-7c...
- scriptkiddy 9y agoThank you for the link, but I've already read that article. I realize that the way my team is doing things is not the only way. It's difficult to change the minds of people who are already set in their ways even when you're in charge. My team believes that the method which I described above is the "best practice" way of composing with react. I disagree, but I need to work with what my team is comfortable with.
- deleted 9y ago[deleted]