Значения не обновляются или не добавляются в состояние Redux - PullRequest
Новая
       6

Значения не обновляются или не добавляются в состояние Redux

0 голосов
/ 01 июля 2018

У меня есть список с флажками (Material-UI)

и мне нужны значения (топпинг (массив максимум из трех топпингов), toppingPrice (0,50 за каждый добавленный топпинг) в моем состоянии компонентов а затем отправить мое действие (ADD_TOPPING) и вижу в моем состоянии приставки значения обновления (topping, toppingPrice)

Я импортирую мое действие создатель 

export const ADD_TOPPING = 'ADD_TOPPING'
    export function addTopping(pizza) {
      return {
        type: ADD_TOPPING,
        payload: pizza
      }
    }

в мой компонент 

class CheckboxList extends React.Component {


  state = {
    topping:[],
    toppingPrice:0,
    checked: [0],

  };

  shouldDisableCheckbox = value => {
     const maxAllowed = 4
     const { checked } = this.state
     return checked.length >= maxAllowed && checked.lastIndexOf(value) === -1
  }


  handleToggle = value => () => {
    const { checked } = this.state;
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];
    this.setState({
      topping: value[0],
      toppingPrice: parseFloat(value[1]),

     });
    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    this.setState({
      checked: newChecked,
    });
  };

  render() {
    const { classes } = this.props;
    const toppings = ['Chicken', 'Pineapple', 'Corn', 'Olives (green)', 'Red union', 'Spinach', 'Cherry tomatoes']
      console.log(this.state)
    return (
      <div className={classes.root}>
        <h3>Additional Toppings <br/><small>(€ 0.50 Per Topping)</small></h3>
        <List>
          {toppings.map(value => (
            <ListItem
              key={value}
              role={undefined}
              dense
              button
              onClick={this.handleToggle(value)}
              className={classes.listItem}
              disabled={this.shouldDisableCheckbox(value)
              }

            >
              <Checkbox
                checked={this.state.checked.indexOf(value) !== -1}
                tabIndex={-1}
                disableRipple

              />
              <ListItemText primary={`NewAge ${value}`} />

            </ListItem>
          ))}
        </List>
      </div>
    );
  }
}

CheckboxList.propTypes = {
  classes: PropTypes.object.isRequired,
};
const mapStateToProps = function(state) {
  return {pizza: state.pizza}
}
const Connect = connect(mapStateToProps, {addTopping})(CheckboxList)


export default withStyles(styles)(Connect);

и подключение его к моему редуктору 

import { ADD_TOPPING} from '../actions/pizza_config'

const initialState = {
  topping: [],
  toppingPrice: 0,
}

export default function(state = initialState, action) {
  const updateState = {...state}
  switch (action.type) {
  case ADD_TOPPING:

    if(action.payload.topping){
      return updateState.topping = action.payload.topping
    }
    if(action.payload.toppingPrice){
    return  updateState.toppingPrice = action.payload.toppingPrice
    }else{
      return {...state}
    }


  default:
    return state
  }
}

У меня очень похожий код для сопоставимые компоненты которые обновляют состояние локально и отображаются в состоянии избыточности и т. д.

Я бы хотел, чтобы он обновил массив в моем состоянии приращения и добавил 0,50 для каждой проверенной начинки

но через три часа сломаю голову Я не могу понять это. как мне это сделать?

1 Ответ

0 голосов
/ 01 июля 2018

Я не уверен, почему вы передаете один объект, а не используете mapDispatchToProps для вашей функции подключения. 

const mapDispatchToProps = () => {
  return {
    onToppingAdded: (topping) => actions.addTopping(topping),
  }
}

Тогда сделайте ваш экспорт: 

const Connect = connect(mapStateToProps, mapDispatchToProps)(CheckboxList)

Кажется, у вашего редуктора тоже есть проблема. 

  case ADD_TOPPING:

if(action.payload.topping){
  **return updateState.topping = action.payload.topping**
}
if(action.payload.toppingPrice){
return  updateState.toppingPrice = action.payload.toppingPrice
}else{
  return {...state}
}

Поскольку полезная нагрузка будет иметь как максимальную, так и максимальную цену, вы возвращаетесь сразу после обновления только первой части. Выполните рефакторинг для постоянного обновления всей соответствующей информации, а затем сразу верните обновленное состояние.

Я бы также порекомендовал вам настроить инструменты для управления приставкой. Вы сможете увидеть, какие действия происходят, а также, что такое магазин редуксов. См. Инструкции здесь

Как общее примечание - я советую вам обрабатывать всю пиццу в редуксе, а не разделять ее между состоянием реакции и хранилищем редуксов, как у вас сейчас.

При использовании Redux я использую состояние реакции только для локального пользовательского интерфейса. Таким образом, флажок подходит для того, чтобы оставаться в контейнере, но вы можете поместить все остальное в избыточный код.

Я почти уверен, что ваша проблема сейчас полностью в редукторе, но если вы исправите эту логику, но у вас все еще будут проблемы, опубликуйте кодовую ручку, и я посмотрю поближе.

...