Update redux state in reactjs with input

Question

In my application i am displaying person data. I have a scenario where I can input new person. So far I have got this: Reducer:

export default function (state = [], action) {
    console.log("Reducing");
    switch (action.type) {
        case 'ADD':
            console.log("ADDING!");
            return action.payload;
            break;
    }
    return state;
}

Action:

export const addPerson = (person) => {
    console.log("addPerson Action Fired! ", person);
    return {
        type: 'ADD',
        payload: person
    }
};

I have a reducer with few person data which i am showing in my application but i am blocked at this point of adding new person. So far i can see my input in console log but can't figure out how can i add it to the state. Help would be very much appreciated.

This is the reducer where i am showing the data from.

export default function () {
    return ["abc","def","ghi","jkl"]
}

Now i am displaying a list of these elements from the array(each are one person). When i add one it will be added with these persons and show me the updated list.

yuantonito · Accepted Answer · 2017-10-31 20:24:46Z

2

You should do the following in your reducer:

export default function (state = [], action) {
    console.log("Reducing");
    switch (action.type) {
      case 'ADD':
        return [
          ...state,
          action.payload,
        ]
    }
    return state;
}

In this way, you add the person to your existing array. Otherwise you changes your current state value from an array to an object.

Let's consider your person object value is the following and you dispatch it:

{
  type: 'ADD',
  payload: {
    id: 1,
    name: 'John Doe',
  }
}

With your previous code, you would have the current value:

// First step
return action.payload;

// Second step
return { id: 1, name: 'John Doe' };

With the corrected code:

// First step
return [
  ...state,
  action.payload,
]

// Second step
return [
  ...[],
  { id: 1, name: 'John Doe' },
]

// Third step
return [{ id: 1, name: 'John Doe' }];

edited Oct 31, 2017 at 20:24

answered Oct 31, 2017 at 20:14

yuantonito

1,2828 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ShocKwav3_ Over a year ago

Hi, I understand the procedures. But it didnot work for me. I already have a preset of person data in another reducer file which i took in the store variable and displaying. I was trying to add new data with that data. Any thoughts?

yuantonito Over a year ago

Hi, can you edit your question to add more details then of from where you start (the current value) and what you expect to have (the expected value after the add) ? I'll edit my answer to answer you again accordingly !

ShocKwav3_ Over a year ago

Hi, I found my problem. The data coming from first reducer and the added person data coming from Second. I had to access the second reducer to get my data. Thank you for your help.

Collectives™ on Stack Overflow

Update redux state in reactjs with input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related