Name: 為什麼我選擇在我的React App中模塊化鴨子 // Lauren Lee // CascadiaJS2018 (Why I Chose to Modularize the Ducks in My React App // Lauren Lee // CascadiaJS 2018)
Uploaded: 2021-01-14T10:52:08.000Z
Duration: 26 min 14 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

My name is Lauren Lee and my pronouns are she and her.

基礎被動語態

My talk is called why I decided to modularize my ducks in the React app.

We will talk about good and bad of React, explore some of the problems within Redux

and I will introduce and propose one possible solution.

My journey to tech was rather unconventional or non-traditional, if you will.

I didn't study CS in college but instead was an English teacher for seven years before

embarking on my journey learning to code.

I spent a lot of time in the classroom lecturing on structure and I mean the five paragraph

essay, the art of writing an outline, rules of grammar and proper sentence construction.

Essentially, all things structure when it comes to a high school lit class.

This combined with the fact I am a Virgo means I really like structure, specifically organized

At Ada developer's academy, a program that trains folks to learn to code here in Seattle

my peers were giving me a hard time over my color-coded notes.

I had taken this massive risk of learning to code and this sort of stuff stock markets

While learning to code, just like my old classroom, I loved when everything had its place.

Later on down the road when I became a software engineer at Amazon I fell really hard for

As I am sure many of us know it has powerful features including the virtual DOM, relative

quick learning curve, helper developer tools and the reusability of modularized components.

I have been drawn to the components of the architecture that is the foundation of React.

I am sure a lot of us are familiar with React so I won't bore by you explaining the intrinsic

When you build with React, you create independent and isolated reusable components and compose

them together to build complex interfaces.

The former grammar obsessed rule following teachers I am loves the encouraged organization

Finding the reusability of -- I find the reusability of the components to be so helpful for engineers

plus it always makes it easy to find everything within your code.

Today, I am going to be using a React app that aggregates viewing data to create a most

This app can be divided the nav, the individual show, and the list view.

Now, the architecture of this app is relatively straightforward, but we all know that things

Thus developers at this points are often forced to discover the not-so-glamorous parts of

Oftentimes we will want to pass data as props around the app quite a bit and React advocates

for a single directional flow and things get messy when we want data in sync when two or

The source of truth is only in one place.

React docs encourages us to lift state up.

If you have two children that need to access the same data and this means putting the data

in the nearest ancestor of the two components.

If these two components are very far apart in the tree, the nearest ancestor could be

To complicate things even more, the immediate components, have absolutely -- may have absolutely

They just happen to be stuck in the middle and have to pass it along.

My favorite analogy for this is the idea of me wanting to tell, say, my cousin, a story

but instead of being able to tell her directly that story I need to tell my aunt.

That is fine if it is, you know, a little non embarrassing story but say it is about

something I don't necessarily want to tell my aunt about bummer.

I still have to pass it through her regardless.

The top ancestor has to pass data down to several intermediary components along the

way to get to the property component and just like the game telephone this creates opportunities

The original story can be muddled and some can get confused as they try to trace the

props that get passed between the many components.

To view it another way, one state is being passed up and down and in between the component

tree, and it is easy to imagine how things could get complicated and to add insult to

injury, my girl Sandy Mets taught me to fear coupling and that is happening big time between

components and parents to try to move a parent around would be complicated.

There is coupling between the components and its parents and between the component's children

Thus, to no one surprise, this impacts performance as every update made to the data causes all

of the children to rerender which causes massive performance and speed issues.

There are many great things React drink brings to the table.

It is important to find a solution for managing an application state if you are looking to

build something more complex than a to-do list.

When we are in the designing phrase of a project, we often, more often than not we want an app

We want to be able to create something maintainable for many months or years into the future and

dare I say it be nice to maintain our sanity when it comes to state management which brings

The state container superhero that saves our day.

Remember the chaos that was the mess of passing data around our components?

That is what Redux successfully helps you make sense of.

Redux is a state management tool for JavaScript applications meaning I can pass data, or say

the embarrassing story about my most recent Bumble escapades to my cousin without telling

AKA I get to avoid the chaos of that story being bounced around all the components or

my many crazy uncles just to update or change one of them and this is important because

of Redux's most important principle: The global store.

The big thing to remember is that the entire state of the application is stored in one

central location called the store meaning that each component of your React app gets

to have direct access to the state of the application without having to send props down

to child components or using callback functions to send data back up to a parent.

Redux provides essential storage that can hold data from anywhere in the application.

To put it differently, Redux completely eliminates the messy tunneling when you are passing data

字幕列表影片播放

為什麼我選擇在我的React App中模塊化鴨子 // Lauren Lee // CascadiaJS2018 (Why I Chose to Modularize the Ducks in My React App // Lauren Lee // CascadiaJS 2018)

sort

absolutely

grab

journey