How to replace data from array to other array?

Question

I'm making Weather App using React + Redux, and I want to make opportunity to follow cities and save the information.

I guess, I need to make something like this in Reducer:

// state 
const initialState = {
    cityValue: '',
    isLoading: false,
    data: [], // array which contains data getting from ajax request
    error: '',
    followingCity: [] // new array with cities which are followed
}

//reducer's case
case ADD_CITY: {
    return {
        ...state,
        followingCity: [...state.followingCity, action.city]
    }
}

// action creator
export const addCity = (city) => ({type: 'ADD_CITY'}, city)

Using connect, the component gets props and then:

<div className="col-lg-5">
    { data.map(i => 
    <div className='time-box' key={i.id}>
        {dateCreator(new Date())}
        <br/>
        <div className='country'>{i.sys.country},</div>
        <div className='city'>{i.name}</div>
        <br/>
        <div onClick={() => addCity(data)} className='add-button'> //calling action
            <span>follow</span>
            <i className="fa fa-plus" aria-hidden="true"></i>
        </div>
    </div>)}
</div>

But in this case I have error:

Error: Actions must be plain objects. Use custom middleware for async actions.

So, I'm not sure that I have to make it like this, so can anybody expaine me how to make it?

@mkamranhamid when I'm using thunk? Or container component whic gets props? — Богдан Чубко
– Богдан Чубко, Commented Jun 13, 2020 at 14:16
please update your question with your component code in which you're calling action — deathstroke
– deathstroke, Commented Jun 13, 2020 at 14:17
I think you have a typo and should change: export const addCity = (city) => ({type: 'ADD_CITY', city})(ie move curly bracket to include city) — Alex
– Alex, Commented Jun 13, 2020 at 14:29

Alex · Accepted Answer · 2020-06-13 14:39:06Z

1

I think you have a typo and should change: export const addCity = (city) => ({type: 'ADD_CITY', city}) (ie move curly bracket to include city)

answered Jun 13, 2020 at 14:39

Alex

1,85917 silver badges31 bronze badges

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

Comments

RaeperFR · Accepted Answer · 2020-06-13 14:37:43Z

0

First, you miss switch (action.type). And the solution for you is to use Object.assign because it's more readable. And now you can put your action in your reducer :) So you need to do for your reducer:

function weatherApp(state = initialState, action) {
   switch(action.type) {
      case 'ADD_CITY' :
         return Object.assign({}, state, {
            followingCity: [
                  ...state.followingCity,
                  {
                      // Your action here
                  }
               ]
         })
   }
}

answered Jun 13, 2020 at 14:37

RaeperFR

273 bronze badges

Collectives™ on Stack Overflow

How to replace data from array to other array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related