3 ms·
I had the same issue. The first time I used React for a quick POC without react-redux/flux, I ended up using react-states a lot - ignoring all the wisdom out th
by smdz 10y ago
I had the same issue. The first time I used React for a quick POC without react-redux/flux, I ended up using react-states a lot - ignoring all the wisdom out there. It worked well only for the POC and ended up refactoring a lot later.
While react and redux are simple individually, react-redux is incredibly frustrating to start with. React-router isn't complex, but feels a bit confusing at first. After a 3 days trying to make sense of "why all the complexity", I was just hours away from dropping the react ecosystem. I was primarily evaluating it against Angular2. Having said that, investing time in React ecosystem has paid off very well
1. Once your app grows, redux will make it simpler
2. Avoid react component states as much as you can. But that doesn't mean that every event dispatches a redux action. I divide my components into connected(smart) and presentational(dumb) components. These inherit from parent base components. That ensures that only connected components can dispatch redux actions and others are just connected with handlers.
3. While this is a ES6 question, I prefer TypeScript (and VS Code). I know many prefer Flow, I've found TS to be better. It might take a few hours to integrate TS in your React code - its only. Strong typing props and states with TS interfaces tends to keep your code bug-free. I also use TS-decorators a lot
4. To keep things simple, I pass the entire redux state to all connected components. Having custom base-components helps avoid being too verbose. And type-defining accessed store-states makes sure I don't break things. And then the intellisense in the editor keeps me fast.
5. Learn webpack in detail. This is very important. If you don't you might find yourself being frustrated quite often.
For simpler Apps ... use VueJS. Using React-Redux and react-router to build a todolist is just over-engineering.