Introduction

to

Redux

(Without React)

Objectives

• Define what redux is

• Describe actions and reducers in redux

• Describe methods on the redux store

Redux

Redux Installation

npm install --save redux

Action

A plain JavaScript object that must have a key called type and a string value

{
  type: "LOGOUT_USER"
}

The action can have any number of additional keys

Reducer

A function that accepts the state and an action and returns a new state (entire state object)

function rootReducer(state={}, action) {
  switch(action.type) {
    case "LOGOUT_USER":
      return {...state, login: false}
    case "LOGIN_USER":
      return {...state, login: true}
    default:
      return state;
  }
}

Creating A Store

Use the Redux createStore function which accepts the root reducer as a paramter

const store = Redux.createStore(rootReducer);

Changing the State

The only way to change the state is by calling dispatch

const store = Redux.createStore(rootReducer);
store.dispatch({
  type: "LOGIN_USER"
});

Getting The State

You can get the state of the Redux store using getState

const store = Redux.createStore(rootReducer);
store.dispatch({
  type: "LOGIN_USER"
});

const newState = store.getState();

Listening For Changes

You can add a listener to see when the state has changed

const store = Redux.createStore(rootReducer);
const changeCallback = () => {
  console.log("State has changed",
              store.getState());
}
const unsubscribe = 
   store.listen(changeCallback);

Redux State Change