javascript - 如何在 redux 中过滤数据？

Question

我有按钮up和down. 通过单击，我需要更改数组中的索引，以便元素在列表中上升或下降，具体取决于按钮。现在我收到一个索引，但我不明白如何更改索引，因为那个在它应该降低它的指数之前？有人可以建议如何做到这一点吗？

// Redusers

export default (state = [], action) => {
  switch (action.type){
    case actionTypes.ADD_EXERCISE:
      return [
        ...state,
        Object.assign({}, action.exercise)
      ];
    case actionTypes.DELETE_EXERCISE:
      return state.filter((data, i) => i !== action.id);
    case actionTypes.FILTER_EXERCISE_UP:
      return state.filter((data, i) => i = action.id + 1); //?????????
    default:
      return state;
  }
};


// Action

export const filterExerciseUp = (id) => {
  return {
    type: actionTypes.FILTER_EXERCISE_UP,
    id: id
  }
};


// Edit Exercise

class EditExercise extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      exerciseName: '',
      exerciseMeasurement: ''
    };
  }
  handleChangeInput = (e) => {
    this.setState({
      exerciseName: e.target.value,
    });
  };

  handleChangeSelect = (e) => {
    this.setState({
      exerciseMeasurement: e.target.value,
    });
  };

  deleteExercise(e, index){
    e.preventDefault();
    this.props.deleteExercise(index);
  }

  filterExerciseUp(e, index){
    e.preventDefault();
    this.props.filterExerciseUp(index);
  }

  render() {
    console.log(this.state);
    const ListExerciseItems = this.props.exercises.map((exercise, index) =>
      <GridContainer key={index}>
      <GridItem xs={12} sm={12} md={4}>
      <CustomInput
        ref={(input) => this.getMessageInput = input}
        onChange={this.handleChangeInput}
        labelText="Exercise name"
        id="exercise-name"
        formControlProps={{
          fullWidth: true
        }}
        inputProps={{
          defaultValue: exercise.exerciseName
        }}
      />
    </GridItem>
    <GridItem xs={12} sm={12} md={3}>
      <FormControl style={{width: "100%"}} className={classes.formControl}>
        <div className="materialSelect">
          <CustomSelect
            onChange={this.handleChangeSelect}
            labelText="Measurement"
            id="custom-select"
            formControlProps={{
              fullWidth: true
            }}
            inputProps={{
              defaultValue: exercise.exerciseMeasurement
            }}
          >
            <option value="kg">kilograms</option>
            <option value="min">minutes</option>
            <option value="m">meters</option>
          </CustomSelect>
        </div>
      </FormControl>
    </GridItem>
    <GridItem xs={12} sm={12} md={5}>
      <div className={classes.buttonWrapper}>
        <Button
          variant="fab"
          type="button"
          color="info"
          aria-label="ArrowUpward"
          className={classes.button}
          onClick={(e) => this.filterExerciseUp(e, index)}
        >
          <ArrowUpward />
        </Button>
        <Button variant="fab" color="info" aria-label="ArrowDownward" className={classes.button}>
          <ArrowDownward />
        </Button>
        <Button
          variant="fab"
          color="warning"
          aria-label="Cancel"
          className={classes.button}
          onClick={(e) => this.deleteExercise(e, index)}
        >
          <Cancel/>
        </Button>
      </div>
    </GridItem>
    <span style={borderItem}></span>
  </GridContainer>
);
return (
  <div>
    <GridContainer>
      <GridItem xs={12} sm={12} md={12}  >
        <Card>
          <form onSubmit={(e) => this.handleSubmit(e)}>


            <CardHeader color="primary">
              <h4 className={classes.cardTitleWhite}>Edit exercise</h4>
            </CardHeader>
            <CardBody>
              {ListExerciseItems}
            </CardBody>
            <CardFooter>
              <Button color="primary" type="submit"> Update Exercise</Button>
            </CardFooter>
          </form>
        </Card>
      </GridItem>
    </GridContainer>
  </div>
   );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    exercises: state.exercises
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    deleteExercise: index => 
 dispatch(exerciseAction.deleteExercise(index)),
     filterExerciseUp: index => 
 dispatch(exerciseAction.filterExerciseUp(index))
  }
 };

 export default connect (mapStateToProps, mapDispatchToProps) 
 (withStyles(styles)(EditExercise));

标签： javascriptreactjsredux

Answer 1

您需要从数组中删除练习，然后将其重新添加到之前的位置：

[...]
case actionTypes.FILTER_EXERCISE_UP:
  var position = -1, 
      exercise = null;
  state.filter((data, i) => {
    if(data.id === action.id) {
      # Get exercise position and data
      position = i;
      exercise = data;
      # Filter out
      return false;
    } else {
      return true;
    }
  });

  // Do some tests and comprovations
  [...]

  // Re-add the exercise one position before
  return state.splice(position-1, 0, exercise);
  [...]