React Context API + Unstated

How to use The React Context API & Inject Dependencies w/ "Unstated"
An HMH Engineering Workshop
Presented on 2018-06-08 - By Alistair MacDonald - HMH Email

💻 Slides

<iframe src="//slides.com/alistairmacdonald-f1lt3r/react-context-api/embed?token=aHyjYpkm" width="100%" height="380px" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Link to Slide Deck

Feel free to add comments/concerns to the slide deck.

🎥 Video

<iframe width="100%" height="380px" frameborder="no" src="https://confluence.hmhco.com/download/attachments/161720078/Workshop%20React%20Context%20API-20180608%201256-1.mp4?version=1&modificationDate=1528474635000&api=v2"></iframe>

Note: Audio does not start until about 6 min.

🔗 Links

Boston Engineering Talks @ HMH

Do you have something you want to present? - Sign up to present a talk/workshop/course. Do you have something you want to learn? - Suggest what HMH Engineers be learning.

Links from the Presentation

• Prop Drilling Example on CodeSandbox
• Blog Post - The Unstated React Pattern on Medium
• Re-usable Code - Unstated React Pattern on CodeSandbox -(You can use this pattern to share state in your React apps.)

Notable Dev Community Posts

• You Might Not Need Redux from the Co-author of Redux
• The Redux Realization
• unstated — The setState of React State Management
• Managing State in React with Unstated
• Application State Management

👻 Challenge #1

1. 🏁 Use this starter: Challenge #1 Starter
2. 🍴 Fork it!
3. ✨ Create a Context with a default value
4. 🌟 Create <Provider/> in <App/>
5. 💫 Create <Subscriber/> in <FooComponent/>
6. 🙌 Output the default value in <FooComponent/>

Hints

const defaultValue = 'foo';
const MyContext = React.createContext(defaultValue);

<MyContext.Provider value="bar">
    <YourApp/>
</MyContext.Provider>

<YourApp>
    <WayDownDeep>
        <MyContext.Consumer>
            {value => (
                <div>
                    {value}
                </div>
            })
        </MyContext.Consumer>
    </WayDownDeep>
</YourApp>

Solution to Challenge #1

😱 Challenge #2

1. 🏁 Use this starter: Challenge #2 Starter
2. 🍴 Fork it!
3. ✨ Make FooComponent an external dependency
4. 💫 Make your Context an external dependency
5. 🌟 Pass state instead of just a value
6. 🙌 Update <Provider/> state from <FooComponent/>

Solutions

• Challenge #2 Solution - Steps 1 & 2
• Challenge #2 Solution - Steps 3 & 4