Redux Overview: Action -> Reducer -> Updated State

Store and State

Reducers and Actions

Putting the Pieces Together

state = {
trackers: []
}
export default function trackerReducer(state = {trackers: []}, action) {

switch (action.type) {
case 'FETCH_TRACKERS':
return {trackers: action.payload}
case 'ADD_TRACKER':
return {...state, trackers: [...state.trackers, action.payload]}

default:
return state
}
}
let store = createStore(trackerReducer)
  1. Actions are dispatched in response to user interactions
  2. The store runs the reducer function to update state depending on which action was passed in
  3. The UI displays the new state

--

--

--

Software Engineer/Full Stack Web Developer | Ruby, JavaScript, React, Redux

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

Recommended from Medium

How to use Call and Apply in JavaScript

Reactivity in vue

concatMapTo operator in RxJS

javascript30 —Day 3: Learning how to manipulate CSS variables with JS

Convert Iterables to Array using Spread in JavaScript

https://cylum.io/app?r=6re3Q21qeD

ES6 every developer must know

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
Michael Rosenberg

Michael Rosenberg

Software Engineer/Full Stack Web Developer | Ruby, JavaScript, React, Redux

More from Medium

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

JS學習筆記(1)

Type-safety while incrementally migrating a large app from Flow to TypeScript

Const myFirstJavascriptBlog = “Declaring Variables”