React Bootstrapping — Deep Dive into Redux Messaging Patterns

What is redux?

  • Navigation state: the current page/URL
  • Data state: the list of articles (response from an API call)
  • UI state: the current filter mask
  • If the user navigates to a page, we dispatch a navigation action and the navigation updates
  • If the page wants to load data from the website, it dispatches an API action
  • If the user selects a filter in the UI, an action is dispatched to update the filter for the currently displayed data
Advanced Redux Patterns — Nir Kaufman @ ReactNYC

Filter

Async API requests

[ROUTER] Navigate
[ARTICLES] Request article List
[API] Request data
[API] Request success
[ARTICLES] Store articles

Splitter

[ROUTER] Navigate
[ARTICLES] Request article List
[UI] Set page loading
[API] Request data
[API] Request success
[ARTICLES] Store articles
[UI] Set page idle

Demo Time

  • request articles
  • store articles
  • set the status of the UI
  • handle a request error

Wrapping up

<li key={`article_${date}`}>

Links and Recommendations

Outlook

Some words about me:

--

--

--

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Customize Angular’s Build System For Local, Dev, Stage and Prod

Angular build system and configuring build targets

How to setup a GraphQL server in Next.js with API endpoints

JavaScript — The Puberty of Brendan’s Child

Form Jamet Bio

React-Slick in React.js Web Applications

Rendering Best Practice

10 Most-Popular Developer Posts in 2018

DApp with Authentication page using Hyperledger Fabric and MongoDB

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Konrad Abe

Konrad Abe

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

More from Medium

Component Rendering in Reactjs(List rendering and conditional rendering)

Multi-threading in JS, and what you can do with it!

Redux Part 1: Intro

How TypeScript can change your life