Architecting presentational and container components in React apps using Redux
Submitted by Alain Lompo (@alainlompo) on Monday, 3 September 2018
Correctly organizing our components makes our code efficient brings increased performance to our React/Redux apps and facilitates later maintenance. Learn here to restructure your code into container (accessing redux store) and presentational (rendering html) components. Jump in, it will be fun!
This talk is aimed at intermediate web developers who are already using react/redux and are familiar with handling the state as well as the view layer of the app.
Our starting scenario is a web app with multiple react components where each component interacts directly with our redux store. The App component subscribing to the store and using getState() to read the state and passes down as props to its children. The children components on the other hand are directly dispatching actions to the store. From there the new paradigm of structuring the components into presentational and container components is introduced. The audience will learn how this paradigm reduces the knowledge of the Redux store to container components, brings efficiency, flexibility and increased performance to our web app. The presentational components become also reusable and by the same token the application becomes easier to maintain.
The following aspect will be presented and demonstrated:
Removing the bindings to store from the App component
Generating containers with react-redux
Using react-redux Provider component
Using connect() to generate container components
Using the Action creator pattern to create action objects
I will, as the last point briefly introduce the audience to handling asynchronicity in redux using redux-thunk
Participant should bring their laptops and they should have Internet Access
Alain is a passion driven software developer with more than fifteen years of professional experience. he also worked previously as a technical trainer for Java/JEE and .Net technologies. he loves sharing amazing technologies in seminar, conferences and evangelism events. Alain regularly contribute to awesome open source projects on github (https://github.com/alainlompo) and helps developers everywhere to solve their problems via stackoverflow. Due to his contribution to technical communities, Alain was twice awarded the MPV (Microsoft Most Valuable Professional) title in 2006 and 2007. Alain is a MCSD .Net (Microsoft Certified Solution Developer), MCT (Microsoft Certified Trainer) since 2004. He is also a Certified Java Programmer and an Oracle Certified Web Component Developer (OCWCD). Alain is the initial architect and main developer of the meodes solution (www.meodes.com) and was, from 2006 to 2009 the technical expert for both .Net and Java/JEE platform for the european union project MEDA 2