There are many different ways to code in React. Choosing how you handle state can be overwhelming, and transitioning to something like Redux can mean tearing up your entire code base.
Let's see how we can write a statfeul React component at the start of a project, and how the needs change throughout the lifecycle of a project.
We will go go from a plain connected React input field, and look at how we can write something more pure. There will be a set of five transformations of the same code. Each transformation uses boilerplate code, moving from an explorative phase into an exploitable phase.
The initial version: A plain React stateful component. We start from here and move towards something more pure step-by-step.
Second version: We break out some code outside the component, while still being in a single file.
Third version: We create separate files for the model, and extract a small util. This is the last React-centric version before the big React.Component purge.
Fourth version: Final form. High quality, and easy to write. We have now extracted away the statefulness. But how do we combine state like Redux? Well, we can use Redux too! Or...
Plus ultra: A magic stream has been observed Plus ultra! We use the Framework planck-state. We can now combine states as well as call actions from the outside with the help of Observable stream.
You can see the source code at https://github.com/marcusnielsen/talks-react-first-principles.
Frontend developers, React developers.
Intermediate
Refactor when the project goes from exploration to exploitation. Handle complexity, so juniors can write stateful components too. Apply what you have learned from React and Redux outside of those libraries on the rest of your code. You can connect the same business logic to plain React, Redux (Proof of Concept: https://gist.github.com/marcusnielsen/0bdc7e099cc28027d0ebcf066ad74fed), Observable streams libraries, or something else.
JavaScript React Object.assign / Object spread Immutability Higher order functions Lambda functions