What’s the purpose of actions, state, and selectors?

  1. ACTIONS: interpret events in terms of their impacts on state.
  2. STATE: is a representation of the base mutable internals of a UI system
  3. SELECTORS: interpret state in terms of impacts on the rest of the front end application.
  1. Displaying a side bar
    a. State: isMenuVisible
    b. Selectors: selectIsBackgroundOpaque,
  2. Collecting input data
    a. State: usernameField, isSubmitted
    b. Selectors: selectDisplayErrorMessage
  3. Displaying a modal
    a. State: showModal
    b. Selectors: selectIsBackgroundOpaque, selectHideScrollbar
  1. The selector state now semantically has meaning with regard to what it does. Using isFetching directly to disable a button is not as good as creating a selector called selectIsButtonDisabled which most clearly describes the button.
  2. In a similar manner, if some other piece of state has an impact on whether or not the button is disabled, we can add it to the selector. This gives us added flexibility to modify behavior later with predictable outcomes because the selector deals solely with whether or not the button should be disabled.
  3. The relationship between state and its impacts are well defined and is better than creating two state variables (isFetching, isButtonDisabled) where the relationship between the two is not codified.
  4. The selector is testable based on the state. Give certain state or combination of states, we can verify the outcome of our selectors through unit testing.
  1. Declarative interpretations of events in terms of their impact on the state of an application.
  2. The sole source of change for what is otherwise an immutable store.
  1. Actions interpret events into state.
  2. State is represents the most base, mutable parts of the internals of our application.
  3. Selectors interpret state to create meaning for the rest of the application.




“A language that doesn’t affect the way you think about programming is not worth knowing.”

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

Recommended from Medium

Comparison of Safe Eval and Eval in JavaScript

snippet of safeEval code, https://github.com/hacksparrow/safe-eval/blob/master/index.js

JavaScript ES6 - Proxy API

A beginner’s guide to TypeScript (with history)


Key points in Local Storage and Session Storage

13 JavaScript Hidden Hacks You Probably Never Heard of

What is Recursion?

Creating My First React App

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
Rob Bertram

Rob Bertram

“A language that doesn’t affect the way you think about programming is not worth knowing.”

More from Medium

Why is it hard for intelligent people to communicate?

Christmas Ruining Sangria

Singers incited a stampede, gunners fired randomly, can’t stop the American “death concert”?

On the Totally Not Mark v. Toei Animation Debacle