Utilisation de case à cocher avec Redux

Question

J'ai des problèmes avec une case à cocher dans mon code dans deux domaines, Le premier, dans mon réducteur, je veux voir si l'état actuel de la case est "true" ou "false" mais je continue à obtenir la syntaxe erreurs sur le si.

const initialState = { 
    viewCheckbox: false 
} 
export default (state = initialState, action) => { 
    switch (action.type){ 
     case 'VIEW_CHECKBOX': 
      return { 
       ...state 
       if (viewCheckbox == false) { 
        viewCheckbox: true 
       } else { 
        viewCheckbox: false 
       } 
      } 
     default: 
      return: state 
    } 
} 

Mon deuxième problème est avec le mapDispatchToProps, j'utilise une table pour créer plusieurs cases à cocher et je veux être en mesure de différencier chacun d'entre eux par ID, et quand je le fais comme ça, il vérifie chaque case à cocher sur la table.

const mapDispatchToProps = (dispatch) => ({ 
    handleViewCheckbox: id => ev => { 
     dispatch(viewCheckboxSubmit(id, ev.target.checked)) 
    } 
}) 

Et quand je crée la case à cocher je le fais comme ceci:

<FormControlLabel 
    control={ 
     <Checkbox 
      checked={checkedView} 
      onChange={handleViewCheckbox(n.id,checkedView)} 
     /> 
    } 
    label='See' 
/> 

Answer 1

Vous ne pouvez pas faire une si à l'intérieur d'un objet comme ça. Vous pouvez utiliser l'opérateur de propagation comme vous l'avez fait, ajouter des variables solo dans lesquelles la clé correspond à la variable que vous voulez utiliser, ou vous pouvez ajouter des clés directement. essayer quelque chose comme ceci:

case 'VIEW_CHECKBOX': 
    return { 
     ...state, 
     viewCheckbox: !viewCheckbox 
    } 

Ils vont tous activer et désactiver parce que vous utilisez le même bit d'état pour gérer ou non, il est vérifié. Si vous voulez procéder de cette façon, vous pouvez essayer de stocker si chaque objet est archivé dans un objet et continuer à le mettre à jour.

{ 
    checkboxid1: false, 
    checkboxid2: false, 
    checkboxid3: true // checked 
} 

alors le composant accessoire pour votre case à cocher checked ressemblerait ..

checked={this.props.isChecked[n.id]} 

en supposant que l'objet tiré dans mapStateToProps et l'a appelé isChecked