CodeRoad Redux JS Tutorial

A CodeRoad tutorial for learning Redux.

CodeRoad

CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. Learn more at CodeRoad.io.

Setup

• install the tutorial package

  npm install --save coderoad-redux-js

• install and run the atom-coderoad plugin

Outline

Project Setup

Getting a project setup is rarely easy. Luckily, we have a quick script that can do the work for us.

---

Running > npm run setup will do the following:

1. Install package dev dependencies
2. Create an output directory called "dist"
3. Install "concurrently" & "browser-sync" globally
4. Run our app in the browser

You'll find this "setup" script located in your package.json.

---

We'll be installing a lot of scripts from terminal. You may also want to consider installing the atom package "platformio-ide-terminal", which provides a terminal inside your editor.

The Store

The "single source of truth".

const store = createStore(reducer, initialState);

Actions

Events that change the data.

1. Actions

const action = { type: 'ACTION_NAME' };

2. Action Creators

const actionName = () => ({ type: 'ACTION_NAME' });

3. Action Types

const ACTION_NAME = 'ACTION_NAME'

Reducer

The data transformation

const reducer = (state) => {
  console.log(state);
  return state;
};

Pure Functions

Reducers must be pure functions

State is "read only".

Notes

const nextPokemon = state.pokemon.map(p => {
    if (id === p.id) {
      p.votes += 1;
    }
    return p;
  });
  return {
   pokemon: nextPokemon
 };

Combine Reducers

Create modular, composable reducers with combineReducers.

Explanation here.

File Structure

Refactor your project into different files.

Explanation here

Logger

The power of middleware with "redux-logger".

Explanation here.

Second Action

Creating a "SORT_BY_POPULARITY" action.

function sortByVotes(a, b) {
  switch(true) {
   case a.votes < b.votes:
    return 1;
  case a.votes > b.votes:
    return -1;
  default:
    return 0;
  }
 }

Sort pokemon by votes

Thunk

Using thunks for async actions.