Redux Road Project

Web Development
1

Hello world, I have a problem with the Redux Road project. Basically, I wrote all the code by following the instruction given, but I have a different output.

Link to the project: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-redux/modules/core-concepts-in-redux/projects/redux-road-core-concepts

On task 11 of Redux Road, I am stuck. The value that I get is different from the instruction given which needs:

{
  supplies: 5,
  distance: 40,
  days: 6
}

This is my code →

And the output that I got from my code:

{ supplies: 100, distance: 0, days: 0 }
{ supplies: 80, distance: 10, days: 1 }
{ supplies: 95, distance: 10, days: 2 }
{ supplies: 65, distance: 10, days: 3 }
{ supplies: 45, distance: 20, days: 6 }
2

task 5 says:

  • 20 less supplies for each day
  • 10 more kilometers of distance traveled for each day

which means on your code

case “travel”: {
return {
…state,
supplies: state.supplies - 20,
distance: state.distance + 10,
days: state.days + action.payload,
}
}

you need to include that 'each day ’

I did :

case “travel”: {
return {
…state,
supplies: state.supplies - 20action.payload,
distance: state.distance + 10action.payload,
days: state.days + action.payload,
}
}

(sorry I realised Codecademy removed (*) between 10 and action.payload :slight_smile:

hope this helps :slight_smile:

6 Likes
3

Thank you so much :smiling_face_with_three_hearts:, my first solution to this was adding a conditional statement on case "travel" lmao.

1 Like
4

thanks , very helpful

5

Completed with additional tasks.

Noticed that you must use a '’ operator for action.payload in case you want to ‘buy’ multiple supplies at once, payload acts like it’s 1 if you don’t.

So happy that I found this project very achievable compared to others :smiley:

any feedback is welcome!

6

You have logic mistake in “case ‘travel’”. You set “if (state.supplies < 20)”. That means that if you log:

wagon = reducer(wagon, {type: ‘travel’, payload: 1});
wagon = reducer(wagon, {type: ‘gather’});
wagon = reducer(wagon, {type: ‘tippedWagon’})
wagon = reducer(wagon, {type: ‘travel’, payload: 5});

The output will be: { supplies: -35, distance: 60, days: 8, cash: 200 }. Because at the moment when it comes to iterate"if", supplies = 65, but “state.supplies - (20 * action.payload)” = 100. That means that at that moment if = true.

Hint gives us an idea to use payload to calculate “if”. Possible solution is to set “if (state.supplies - (20 * action.payload) < 0)”.

7

I learnt one or two from your work. thanks even though i went ahead to use the else-if method to solve it.

const initialWagonState = {
supplies: 100,
distance: 0,
days: 0,
}

console.log(initialWagonState )
const callReducer = (state = initialWagonState, action) => {
if(‘gather’ === action.type) {
return {
…state,
supplies: state.supplies + 15,
distance: state.distance,
days: state.days
}
}else if(‘travel’ === action.type) {
return {
…state,
supplies: state.supplies - (20 * 3),
distance: state.distance + (10 * 3),
days: state.days + 3
}
}else if(‘tippedWagon’ === action.type) {
return {
…state,
supplies: state.supplies - 30,
distance: state.distance,
days: state.days + 1
}
}
else{
return state
}
}

let wagon = callReducer(undefined, {});
console.log(‘initial state’)
console.log(wagon);

wagon = callReducer(wagon, {type: ‘travel’, payload: 1})
console.log(wagon);

wagon = callReducer(wagon, {type: ‘gather’, payload: 0})
console.log(wagon);

wagon = callReducer(wagon, {type: ‘tippedWagon’, payload: 0})
console.log(wagon);

wagon = callReducer(wagon, {type: ‘travel’, payload: 3})
console.log(wagon)

8

Maybe I misunderstood, but, if no logic must be in reducers, isn’t wrong write inside a reducer the calculation of the payloads? Isn’t it should be in someway outside of the reducer?

9

In the syllabus, there must be no asynchronous logic or “side effects” inside a reducer.
The calculation of the payloads is neither asynchronous logic nor side effects.
The purpose of reducer is to update the current state of the application by using either switch statements or if / else conditions.
I hope this helps.

10
const initialWagonState={ supplies:100, distance:0, days:0, cash:200, } const reducer=(state=initialWagonState, action)=>{ switch (action.type){ default: return state; case 'gather': return { ...state, supplies: state.supplies+15, days: state.days+1, }; case 'travel': if (state.supplies-(20*action.payload) < 0){ return state; } else { return {...state, supplies:state.supplies-(20*action.payload), distance:state.distance+(10*action.payload), days:state.days+action.payload, }; }; case 'tippedWagon': return { ...state, supplies:state.supplies-30, days:state.days+1, }; case 'sell': return { ...state, supplies:state.supplies-20, cash:state.cash+5, }; case 'buy': return { ...state, supplies:state.supplies+25, cash:state.cash-15, }; case 'theft': return { ...state, cash:state.cash*0.5, } } }; const travel={ type:'travel', payload:1, }; let wagon=reducer(undefined, {}); //first day wagon=reducer(wagon,travel) console.log('First day: ') console.log(wagon); //second day wagon=reducer(wagon, {type:'gather'}) console.log('Second day: '); console.log(wagon); //third day wagon=reducer(wagon, {type:'tippedWagon'}) console.log('Third day: '); console.log(wagon); //4th day wagon=reducer(wagon, {type:'travel', payload:3}) console.log('4th day: '); console.log(wagon);
1 Like