Ошибка типа: .push не определена

Question

Я создал избыточное хранилище данных, в котором я хочу сохранить индекс домашних животных, которые понравились пользователю или не понравились ему.Я столкнулся с проблемой, когда я получаю ошибку, когда TypeError: .push не определен.Я следую базовому учебнику по редуксу, упомянутому здесь: https://www.youtube.com/watch?v=KcC8KZ_Ga2M Меня смущает тот факт, что я сначала определяю массив, а затем не определяю его при вставке целого числа в массив.

ProfileApp.js

class ProfileApp extends React.Component {
  constructor(props) {
    super(props)
   .........(Truncated for brevity)
   .........(Truncated for brevity)
   }
   componentWillMount() {

   .........(Truncated for brevity)
   this.props.likePets(this.state.currentIndex);
   .........(Truncated for brevity)
   this.props.dislikePets(this.state.currentIndex);



   }
   function mapStateToProps(state){
     return {
       likedPets: state.likedPets,
       dislikedPets: state.dislikedPets
     }
   }
   function mapDispatchToProps(dispatch){
     return{
       likePets: (i)=> dispatch({type:'LIKE_PETS'}),
       dislikePets: (i)=> dispatch({type:'DISLIKE_PETS'})
     }

   }
   export default connect(mapStateToProps)(ProfileApp)

App.js

import  ProfileApp  from './src/ProfileApp';
import {Provider} from 'react-redux';/
const initialState = {
  likedPets: [],
  dislikedPets: []

}
const reducer = (state = initialState, action) =>{

console.log(state.likedPets)
console.log(state.dislikedPets)

  switch (action.type){

    case 'LIKE_PETS':
    return{likedPets: likedPets.push(action.index)}
    case 'DISLIKE_PETS':
    return{dislikedPets:dislikedPets.push(action.index)}
  }
  return state

}

const store = createStore(reducer);
export default class App extends React.Component {



  render() {
    return (
    <Provider store = {store}>
      <ProfileApp></ProfileApp>
    </Provider>

    )
  }
}

вывод при первой компиляции этого кода на консоли выглядит следующим образом: при начальной загрузке:

Array []
Array []
Running application "main" with appParams:.....(Trimed)

Использование: как домашнее животное

Array []
Array []

Использование: как у других питомцев

1
undefined

Answer 1

Вам нужно передать в mapDispatchToProps при подключении:

export default connect(mapStateToProps)(ProfileApp)

на

export default connect(mapStateToProps, mapDispatchToProps)(ProfileApp)

Вам нужно распространить свое состояние в редукторе:

return{likedPets: likedPets.push(action.index)}

to

return{...state, likedPets: likedPets.push(action.index)}

в противном случае вы перезаписываете состояние в хранилище объектом, на котором нет ваших dislikedPets.

Также метод push массивов возвращает длину массива.Замените это на

likedPets: [...state.likedPets,action.index]

Чтобы получить массив, который является текущим состоянием (likesPets) с добавленным к нему action.index.