我正在导入这样一个对象文件
const exercisePack = {
squatExerciseMain,
randomPackLegsBasic,
randomPackUpperBodyAndAbdomen,
randomPackUpperBodyChestAndArms,
...
};
这些变量中的每一个都是一个包含对象的数组
const pullExercisesBodyweightVertical = [
new AccessoryExercise('Pull-ups',[3,10],['forearm', 'arms', 'upperback', 'shoulders'],['pull', 'bilateral']),
new AccessoryExercise('Pull-ups neutral grip',[3,10],['forearm', 'arms', 'upperback', 'shoulders'],['pull', 'bilateral']),
...
].
我想以一种可以在下拉列表中访问它们并在该组件中使用 reducer 的方式使用它们
<tr className="Accesories">
<td> <h3>II. {accesoryExerciseFirst.name} </h3> </td>
<td></td>
<td>
<button className={classes.IncrementationButton} onClick={() => dispatch({ type: "DECREMENT_SETS", exercise: "accesoryExerciseFirst" })}> - </button>
<h3> {state.accesoryExerciseFirst.sets} </h3>
<button className={classes.IncrementationButton} onClick={() => dispatch({ type: "INCREMENT_SETS", exercise: "accesoryExerciseFirst" })}> + </button>
</td>
<td>
<button className={classes.IncrementationButton} onClick={() => dispatch({ type: "DECREMENT_REPS", exercise: "accesoryExerciseFirst" })}> - </button>
<h3> {state.accesoryExerciseFirst.reps} </h3>
<button className={classes.IncrementationButton} onClick={() => dispatch({ type: "INCREMENT_REPS", exercise: "accesoryExerciseFirst" })}> + </button>
</td>
</tr>
我知道每个配件都有自己的组和次数,并且知道在进行更改时也必须更新此状态,我如何使用减速器更改配件练习?
这就是现在的reducer
function exerciseReducer(state:any, action: Action) {
switch (action.type) {
case "CHANGE_MAIN_EXERCISE":
return {
...state,
mainExercise: action.exercise
};
case "CHANGE_ACCESSORY_EXERCISE":
return {
...state,
accessoryExercise: action.exercise
};
case "INCREMENT_SETS":
return {
...state,
[action.exercise]: {
...state[action.exercise],
sets: state[action.exercise].sets + 1
}
};
case "DECREMENT_SETS":
return {
...state,
[action.exercise]: {
...state[action.exercise],
sets: state[action.exercise].sets - 1
}
};
case "INCREMENT_REPS":
return {
...state,
[action.exercise]: {
...state[action.exercise],
reps: state[action.exercise].reps + 1
}
};
case "DECREMENT_REPS":
return {
...state,
[action.exercise]: {
...state[action.exercise],
reps: state[action.exercise].reps - 1
}
};
default:
return state;
}
}