Redux - Send Action Data to the Store

JavaScript
1

Tell us what’s happening:
I had a hard time understanding the question and after few hours, again stuck on what the following mean

whenever there is an action of type ADD_NOTE and it should return the text property on the incoming action as the new state

Not sure how to get property of text on state

Following is my code
Your code so far

const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // Change code below this line
    case 'ADD_NOTE':
     return {
       text
     }
    // Change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // Change code below this line
  return {
    type: ADD_NOTE,
    text: note
  }
  // Change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello!'));
console.log(store.getState());

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 - Send Action Data to the Store

Link to the challenge:

2

If you have an action that comes in like this:

{
    type: 'ADD_NOTE',
    text: 'this is the note'
}

So, there is “an action of type ADD_NOTE”, then we should return action.text - “the text property on the incoming action”. You want to return that from your reducer. Whatever you return from the reducer becomes “the new state”.

3

:sweat_smile: I m so lost even with what I started with in Redux. I tried many tutorials on YT but everyone seem to be going so blazing fast. I like to understand with an analogy.

4

Did you understand what I wrote?

For me, redux is like having a warehouse of information. You cannot go into the warehouse. If you want to change something, you need to fill out a request form (an action object). The request form must have a “type”, saying what type of data manipulation you want. You can also send along data in the request for that you need. To make sure you don’t make a mistake, you can use an action creator, a function that will create your request form (a function that returns a completed action object).

To get the data to the warehouse, you pass your request slip to a magic elf (dispatch function) that takes to it to person in charge of actually making the data change (reducer function). That person reads the “type” on the request slip to know what change to make.

You cannot see the data change directly. You can also call getState. (You can also subscribe listeners, but we may not need to worry about that right now.)

  1. You use an action creator to create an action.
  2. You dispatch the action
  3. Dispatch sends it through the reducer
  4. If the switch statement in the reducer has a case that matches action.type, it will create a new version of state and return it as the new state.
  5. If you call getState, you will see your new state.

Redux is confusing - give it some time.

1 Like
5

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