时间戳

首页 > 解决方案 > 值未更新或添加到 Redux 状态

reactjs - 值未更新或添加到 Redux 状态

问题描述

我有一个带有复选框的列表（Material-UI）

我想要值（顶部（最多三个顶部的数组），顶部价格（每个添加顶部的 0.50）到我的组件状态，然后调度我的操作（ADD_TOPPING）并在我的 redux 状态中查看更新值（顶部，顶部价格）

我正在导入我的动作创建者

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
  }
}

对于在本地更新状态并出现在 redux 状态等的可比较组件，我有非常相似的代码。

我希望它在我的 redux 状态下更新数组，并为每个选中的顶部添加 0.50

但是经过三个小时的折断后，我似乎无法弄清楚。我该怎么做呢？

标签： reactjsreduxreact-redux

解决方案

我不确定您为什么要传递单个对象，而不是使用 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 开发工具。您将能够看到正在发生的操作，以及 redux 商店是什么。在此处查看说明

作为一般说明 - 我建议你在 redux 中处理你的整个披萨，而不是像现在这样在 react state 和 redux store 之间拆分它。

使用 Redux 时，我唯一一次使用 react state 是用于本地 UI 状态。所以复选框留在容器中是可以的，但你可以将其他所有内容放入 redux。

我很确定您的问题现在完全出在减速器中，但是如果您修复了该逻辑并且仍然遇到问题，请发布代码笔，我会仔细研究一下。

推荐阅读