Skip to content

Instantly share code, notes, and snippets.

@mojaray2k

mojaray2k/redux-examples.md

Last active June 12, 2019 14:17
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 mojaray2k/6632bf6e2d303045298bc2d9fb9510f6 to your computer and use it in GitHub Desktop.
Save mojaray2k/6632bf6e2d303045298bc2d9fb9510f6 to your computer and use it in GitHub Desktop.
Download ZIP
Readux Esamples with patterns and middleware
Raw
redux-examples.md

Redux Examples

Simple Redux Application

// state
let state = [];
// reducer
let reducer = (state, action) => {
  if(action.type === 'NEW_ORDER') {
    let newState = [...state, action.payload];
    return newState;
  }
  return state;
}
// action
let action = { type: 'NEW_ORDER', payload: 'Coffee'};

//result
let resultState = reducer(state, action);

console.log(resultState);
console.log(reducer(resultState, action));

Restore State from Store

// reducer
let reducer = (state = [], action) => {
  if(action.type === 'NEW_ORDER') {
    let newState = [...state, action.payload];
    return newState;
  }
  return state;
}
// action
let action = { type: 'NEW_ORDER', payload: 'Coffee'};

// store
let store = Redux.createStore(reducer);

store.dispatch(action);
store.dispatch(action);
console.log(store.getState());
store.dispatch(action);
console.log(store.getState());

Firing Different Actions

First Case

// reducer
let reducer = (state = [], action) => {
  if(action.type === 'NEW_ORDER') {
    let newState = [...state, action.payload];
    return newState;
  }
  return state;
}

// store
let store = Redux.createStore(reducer);

store.dispatch({ type: 'NEW_ORDER', payload: {id: 1, order: 'Coffee', amount: 1}});
store.dispatch({ type: 'NEW_ORDER', payload: {id: 2, order: 'Cake', amount: 1}});
store.dispatch({ type: 'NEW_ORDER', payload: {id: 3, order: 'Sandwich', amount: 1}});
console.log(store.getState());

Second Case

// reducer
let reducer = (state = [], action) => {
  if(action.type === 'NEW_ORDER') {
    let newState = [...state, action.payload];
    return newState;
  }else if(action.type =='CHANGE_AMOUNT' ){
    let {id, amount} = action.payload;
    let newState = [...state];
    newState.map((item) => {
      if(item.id === id) {
        item.amount = amount;
      }
    })
    return newState;
  }else if(action.type =='DELETE_ORDER' ){
    let {id} = action.payload;
    let newState = [...state];
    return newState.filter((item) => item.id !== id);
  }
  return state;
}

// store
let store = Redux.createStore(reducer);

store.dispatch({ type: 'NEW_ORDER', payload: {id: 1, order: 'Coffee', amount: 1}});
store.dispatch({ type: 'NEW_ORDER', payload: {id: 2, order: 'Cake', amount: 1}});
store.dispatch({ type: 'NEW_ORDER', payload: {id: 3, order: 'Sandwich', amount: 1}});
console.log(store.getState());

store.dispatch({type: 'CHANGE_AMOUNT', payload: {id: 2, amount: 3}});
console.log(store.getState());
store.dispatch({type: 'DELETE_ORDER', payload: {id: 3}});
console.log(store.getState());

Third Case - Code Refactored

// reducer
let reducer = (state = [], action) => {
  switch (action.type) {
    case "NEW_ORDER": {
      let newState = [...state, action.payload];
      return newState;
    }
    case "CHANGE_AMOUNT": {
      let { id, amount } = action.payload;
      let newState = [...state];
      newState.map(item => {
        if (item.id === id) {
          item.amount = amount;
        }
      });
      return newState;
    }
    case "DELETE_ORDER": {
      let { id } = action.payload;
      let newState = [...state];
      return newState.filter(item => item.id !== id);
    }
    default:
      return state;
  }
};

// store
let store = Redux.createStore(reducer);

store.dispatch({
  type: "NEW_ORDER",
  payload: { id: 1, order: "Coffee", amount: 1 }
});
store.dispatch({
  type: "NEW_ORDER",
  payload: { id: 2, order: "Cake", amount: 1 }
});
store.dispatch({
  type: "NEW_ORDER",
  payload: { id: 3, order: "Sandwich", amount: 1 }
});
console.log(store.getState());

store.dispatch({ type: "CHANGE_AMOUNT", payload: { id: 2, amount: 3 } });
console.log(store.getState());
store.dispatch({ type: "DELETE_ORDER", payload: { id: 3 } });
console.log(store.getState());

Subscribing to Redux Store

// reducer
let reducer = (state = [], action) => {
  switch (action.type) {
    case "NEW_ORDER": {
      let newState = [...state, action.payload];
      return newState;
    }
    case "CHANGE_AMOUNT": {
      let { id, amount } = action.payload;
      let newState = [...state];
      newState.map(item => {
        if (item.id === id) {
          item.amount = amount;
        }
      });
      return newState;
    }
    case "DELETE_ORDER": {
      let { id } = action.payload;
      let newState = [...state];
      return newState.filter(item => item.id !== id);
    }
    default:
      return state;
  }
};

// store
let store = Redux.createStore(reducer);
store.subscribe(() => {
  console.log(store.getState());
})
store.dispatch({
  type: "NEW_ORDER",
  payload: { id: 1, order: "Coffee", amount: 1 }
});
store.dispatch({
  type: "NEW_ORDER",
  payload: { id: 2, order: "Cake", amount: 1 }
});
store.dispatch({
  type: "NEW_ORDER",
  payload: { id: 3, order: "Sandwich", amount: 1 }
});
store.dispatch({ type: "CHANGE_AMOUNT", payload: { id: 2, amount: 3 } });
store.dispatch({ type: "DELETE_ORDER", payload: { id: 3 } });

Understanding createStore() and reducers

let initialState = { 
  orders: [
    { id: 1, order: "Coffee", amount: 1 },
    { id: 2, order: "Cake", amount: 1 },
    { id: 3, order: "Sandwich", amount: 1 }
  ] 
};

const NEW_ORDER = 'NEW_ORDER';
const CHANGE_AMOUNT = 'CHANGE_AMOUNT';
const DELETE_ORDER = 'DELETE_ORDER';

// reducer
let reducer = (state = initialState, action) => {
  switch (action.type) {
    case NEW_ORDER: {
      let newState = {...state, orders: [...state.orders, action.payload]};
      return newState;
    }
    case CHANGE_AMOUNT: {
      let { id, amount } = action.payload;
      let newState = {...state};
      newState.orders.map(item => {
        if (item.id === id) {
          item.amount = amount;
        }
      });
      return newState;
    }
    case DELETE_ORDER: {
      let { id } = action.payload;
      let newState = {...state};
      newState.orders = newState.orders.filter(item => item.id !== id);
      return newState;
    }
    default:
      return state;
  }
};

// store
let store = Redux.createStore(reducer, initialState);
store.subscribe(() => {
  console.log(store.getState());
})

store.dispatch({ type: CHANGE_AMOUNT, payload: { id: 2, amount: 3 } });
store.dispatch({ type: DELETE_ORDER, payload: { id: 3 } });

Splice Reducers and Combine Them

let initialState = {
  orders: [
    { id: 1, order: "Coffee", amount: 1 },
    { id: 2, order: "Cake", amount: 1 },
    { id: 3, order: "Sandwich", amount: 1 }
  ],
  users: [
    { id: 1, name: "John", age: 34 },
    { id: 2, name: "Mark", age: 28 },
    { id: 3, name: "Nick", age: 45 }
  ]
};

const NEW_ORDER = "NEW_ORDER";
const CHANGE_AMOUNT = "CHANGE_AMOUNT";
const DELETE_ORDER = "DELETE_ORDER";

const CHANGE_AGE = 'CHANGE_AGE';

// reducers
let orderReducer = (state=initialState.orders, action) => {
  switch (action.type) {
    case NEW_ORDER: {
      let newState = [ ...state, action.payload];
      return newState;
    }
    case CHANGE_AMOUNT: {
      let { id, amount } = action.payload;
      let newState = [ ...state ];
      newState.map(item => {
        if (item.id === id) {
          item.amount = amount;
        }
      });
      return newState;
    }
    case DELETE_ORDER: {
      let { id } = action.payload;
      let newState = [ ...state ];
      return newState.filter(item => item.id !== id);
    }
    default:
      return state;
  }
};

let userReducer = (state=initialState.users, action) => {
  switch (action.type) {
    case CHANGE_AGE: {
      let { id, age } = action.payload;
      let newState = [ ...state ];
      newState.map(item => {
        if (item.id === id) {
          item.age = age;
        }
      });
      return newState;
    }
    default:
      return state;
  }
}

let rootReducer = Redux.combineReducers({
  orders: orderReducer,
  users: userReducer
});

// store
let store = Redux.createStore(rootReducer, initialState);
store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch({ type: CHANGE_AMOUNT, payload: { id: 2, amount: 3 } });
store.dispatch({ type: DELETE_ORDER, payload: { id: 3 } });

store.dispatch({ type: CHANGE_AGE, payload: { id: 3, age: 25 } });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment