Следующий реквизит возвращает неопределенное React + Redux - PullRequest
Новая
       4

Следующий реквизит возвращает неопределенное React + Redux

0 голосов
/ 27 февраля 2019

Все, что я сделал здесь, - это создал компонент, который имеет кнопку для изменения состояния в хранилище, поэтому я создал mapDispatchToProps, который отправил действие в кнопку onClick обработчик события 

export class ProductCard extends Component{
  render(){
    return(
      <div className="ImageCard" style={{backgroundImage:"url("+this.props.image+")"}}>
        <div className= "product-details">{this.props.details}</div>
        <button
          className="TheButton btn btn-dark"
          onClick = {(e)=>{
            console.log(this.props);
            this.props.updateData(1)}}>Click Here</button>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  updateData: (data) => dispatch(changeState(data))
});

componentWillReceiveProps ({data}) {
  console.log("next props",data)
}

const mapStateToProps = (state) => ({
  data:state.data,
  title:state.title
});

export default connect(mapStateToProps,mapDispatchToProps)(ProductCard);

этокод магазина 

const initstate={
  data:0,
  title:'rr'
}
const store = createStore((state=initstate , action)=>{
  if (typeof state === 'undefined') {
    console.log("lo");
    return 0;
  }
  switch(action.type){
    case types.CHANGESTATE:{
      console.log(state)
      return state.data + action.data;
    }
    default:
      return state;
  }
});

Когда я регистрирую следующие реквизиты, я получаю неопределенные значения data и title, не могли бы вы сказать мне, что мне здесь не хватает?

1 Ответ

0 голосов
/ 27 февраля 2019

В вашем редукторе вы ВСЕГДА должны вернуть новый объект, который будет представлять ваше новое состояние.В вашем действии CHANGESTATE вы не возвращаете объект, вы только возвращаете число (state.data + action.data).Попробуйте вернуть этот объект: 

{ ...state, data: state.data + action.data }

Таким образом, ваш полный case будет выглядеть так: 

case types.CHANGESTATE: {
  console.log(state)
  return {
    ...state,
    data: state.data + action.data
  };
}
...