Redux - Write a Counter with Redux

JavaScript
1

Tell us what’s happening:
I am not very much familiar with redux but I m getting somewhere, following is my code, but not sure where I am getting wrong, about action and create action.

Your code so far

const INCREMENT = null; // Define a constant for increment action types
const DECREMENT = null; // Define a constant for decrement action types

const counterReducer = (state = 0, action)=>{
  if(action === 'INCREMENT'){
    return {
      ...state + 1
    }
  }else if(action === 'DECREMENT'){
    return {
      ...state - 1
    }
  }
  return state
} // Define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = ()=>{
  return {
    type: 'INCREMENT'
  }
} // Define an action creator for incrementing

const decAction = ()=>{
  return{
    type: 'DECREMENT'
  }
}; // Define an action creator for decrementing

const store = null; // Define the Redux store here, passing in your reducers

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Redux - Write a Counter with Redux

Link to the challenge:

2

Hello,

I would review the following in order to get your Redux counter working.

Defining your Redux actions

  • In your code, the constant INCREMENT and DECREMENT are set to null. These need to be assigned a non-null value.
  • Next, you’ll need to alter your counterReducer function.

Reducers

  • Your reducer switch statement should handle your constant values, not string literals.
  • Additionally, you should leverage switch/case statements rather than if else.
  • Next, your expression to determine if an action is of type INCREMENT or DECREMENT will not behave as intended. Pay close attention to the way you defined the return of incAction and decAction.
  • Finally, you declared state to have an initial value of 0, giving it a typeof value of number. However, in your if and else if return, you return an (invalid) object, and apply destructuring assignment where it is not warranted.

Redux Stores

Define the store, so that you can dispatch actions against it.

Hope this helps! Let me know if you have further questions.

3

Following is latest code

const INCREMENT = {
  type: 'Increment'
}; // Define a constant for increment action types
const DECREMENT = {
  type: 'Decrement'
}; // Define a constant for decrement action types

const counterReducer = (state = 0, action)=>{
  switch(action){
    case INCREMENT:
     return{
       state: state +=1
     }
    case DECREMENT:
    return{
      state: state -=1
    }
    default:
     state
  }
}; // Define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = ()=>{
  return{
    type:INCREMENT
  }
}; // Define an action creator for incrementing

const decAction = ()=>{
  return{
    type: DECREMENT
  }
}; // Define an action creator for decrementing

const store = Redux.createStore(counterReducer); // Define the Redux store here, passing in your reducers

Still, trying to figure out if INCREMENT and DECREMENT should be number or what kind of data?

4

I was able to do it, hurray? following is my code

const INCREMENT = {

}; // Define a constant for increment action types
const DECREMENT = {
  
}; // Define a constant for decrement action types

const counterReducer = (state = 0, action)=>{
  switch(action.type){
    case INCREMENT:
     return state = state + 1
    case DECREMENT:
     return state = state -1
    default:
     return state
  }
}; // Define the counter reducer which will increment or decrement the state based on the action it receives

// Define an action creator for incrementing
const incAction = ()=>{
  return {
    type: INCREMENT
  }
}; 
 // Define an action creator for decrementing
 const decAction = ()=>{
  return {
    type: DECREMENT
  }
};

const store = Redux.createStore(counterReducer); // Define the Redux store here, passing in your reducers

But I really don’t understand why INCREMENT and DECREMENT should be empty. if not what kind of value should it have?

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.