REDUX REDUCER

const BUY_PASTA  = ‘ BUY_CAKE ’function buyPasta(){
return {
type: BUY_PASTA,
info : 'First redux action'
}
}
(prevoiusState, action) => newState
const initialState = {numOfPasta: 10 }
const initialState = {numOfPasta: 10 }const reducer = (state = initialState, action) => {
}
}
const initialState = {numOfPasta: 10}const reducer = (state = initialState, action) => {switch(action.type) {
case BUY_PASTA return {
numOfPasta: state.numOfPasta -1
}

default: return state
}
}
const initialState = {numOfPasta: 10}const reducer = (state = initialState, action) => {switch(action.type) {
case BUY_PASTA return {
...state;
numOfPasta: state.numOfPasta -1
}

default: return state
}
}
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
PlayerReducer.jsexport default function playerReducer(state = {players: []}, action ) {
switch (action.type){
case 'FETCH_PLAYERS':
return {players: action.payload}
case 'ADD_PLAYER':
#We need another case to add player
return{...state, players: [...state.players, action.payload]}
case 'ADD_CONTRACT':
return {...state, newContract:action.payload}case'DELETE_CONTRACT':
return {...state, newContract:action.payload.contract}
default:
return state
}
}
let state= {numberOfPresents: 0}export function managePresents(state, action){switch(action.type){case 'INCREASE' :*return* {numberOfPresents: state.numberOfPresents +1}default:*return* state}}export function manageFriends(state = {friends: []} , action){switch(action.type){case 'ADD_FRIEND' :console.log(action)*return* {**...**state, friends: [**...**state.friends, action.friend]}case 'REMOVE_FRIEND' :const removeFriend = state.friends.findIndex(friend => friend.id === action.id)*return* ({**...**state,friends : [**...**state.friends.slice(0, removeFriend),**...**state.friends.slice(removeFriend + 1)]})default:*return* state;}}

Let’s break down

  1. line 1.2 * We are initialize state as a default Object with a key (friend) and set the value empty array.{friends: []
  2. line10* We are basically copy original array’s key and values with spread operator.
  3. its return a new state with this friend object added to the friends array.
  4. /line12 The findIndex() method returns the index of the first element in the array that satisfies
  5. the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
  6. Found the friend with the matching id
  7. line 13/17 Thought of in another way, the reducer is really returning a new state with an array of friends that includes everyone except the removed friend.
  8. The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and
  9. end represent the index of items in that array. The original array will not be modified.

Summary

--

--

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
Soner Mezgitci

Soner Mezgitci

31 Followers

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux