Skip to content

Instantly share code, notes, and snippets.

@heitoralthmann
Last active May 9, 2019 16:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save heitoralthmann/6026934300edccb513e97db9fd4e4009 to your computer and use it in GitHub Desktop.
Save heitoralthmann/6026934300edccb513e97db9fd4e4009 to your computer and use it in GitHub Desktop.
Egghead Redux Getting Started Notes

STATE OBJECT

  • I will be representing the whole state of my application with A SINGLE STATE OBJECT.
  • This state object is read only. Every time I want to change it, I must dispatch an action.
  • The STATE is the minimum representation of data in my app.

ACTIONS

  • The ACTION is the minimum representation describing the change to that data.
  • Action objects MUST HAVE AT LEAST a type property. We better use strings for this option because it is serialisable.
  • The only way to change the state tree is by dispatching an action.
  • An action is a plain javascript object describing in the minimum way, what changed in the application.

PURE AND IMPURE FUNCTIONS

  • Pure functions DO NOT MODIFY THE VALUES PASSED TO THEM.
  • Some functions I will be writing on redux need to be pure and I need to be aware of that.

THE REDUCER FUNCTION

  • The redurecer is a function that calculates the next state tree based on the previous state tree and the action being dispatched.
  • State mutations need to be described as a pure function that takes the previous state and the action being dispatched and returns the next state of your application.
  • Reducers need to be pure functions.

THE STORE

  • The store binds together the 3 principles of redux. It holds the current application state object; It lets you dispatch actions; When you create it, you need to specify the reducer that tells how state is updated with actions.
  • const { createStore } = Redux;
  • const store = createStore(reducerFunction);
  • The store has 3 important methods: getState(), dispatch({ type: 'TYPE' }) and subscribe(() => { // Called everytime an action is dispatched. }).

ON REACT...

  • Presentational components care only about styles. They don't have any logic. It has no behavior defined on it, but surely knows how to render itself.
  • It's better to separate concerns (use presentation components wherever possible) so your application grows decoupled. And if one day you need to change some part of it, it's likely that this change will have an isolated impact on your application, concerning only its respective layer.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment