Estoy trabajando en una aplicación de reacción en la que estoy usando redux para la gestión del estado, soy nuevo en esto y tengo que realizar varias operaciones de cambio de estado dentro de una función reductora.

Aquí está mi función reductora:

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client]
  }
}

Lo que quiero hacer es agregar un elemento a clientList que estoy haciendo aquí y luego reasignar 2 variables clientName y clientStatus también como:

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "",
    clientStatus: "",
    clientAccessGrants: []
  }
} 

¿Cómo puedo lograr esto dentro de la función reductora? Cualquier ayuda será muy apreciada.

Aquí está mi enlace de github: aquí

Puede ver el reductor en clientReducer, la llamada de acción ON_SUBMIT en Form / PopupActions.

1
rudeTool 13 jul. 2021 a las 09:26

3 respuestas

La mejor respuesta

Problema

Ha declarado los valores fuera de la devolución.

https://github.com/Himanshuranjan30/ClientDash2/blob/master/src/clientDashboard/actions/clientReducer.js#L269-L278

case Actions.ON_SUBMIT_CLIENT:{
  clientName:""; // <-- not returned
  clientStatus:""; // <-- not returned
  clientAccessGrants:[] // <-- not returned
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    
  }
}

Solución

Si desea actualizar el estado, deben devolverse como parte del valor de estado siguiente devuelto por el caso del reductor.

case Actions.ON_SUBMIT_CLIENT:
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "";
    clientStatus: "";
    clientAccessGrants: [];
  }

Actualizar

Entonces, parece que está enviando la acción incorrecta o manejando la acción incorrecta en el reductor.

El creador de la acción submitClient envía una acción del tipo Actions.SUBIMT_CLIENT ('CLIENT/SUBIMT_CLIENT') pero el caso del reductor que tiene es el manejo de una acción del tipo Actions.ON_SUBMIT_CLIENT ('Actions.ON_SUBMIT_CLIENT'). Hay un error tipográfico en la ortografía de "enviar" en el creador de la acción, por lo que este fue complicado de rastrear.

La actualización del reductor para manejar el mismo tipo de acción que se envía ahora borra / restablece el otro estado.

case Actions.SUBIMT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "",
    clientStatus: "",
    clientAccessGrants: []
  };
}

Aquí hay un archivo bifurcación de codeandbox de su repositorio de github. Agregué las herramientas de desarrollo de redux para que, si tiene la extensión, pueda ver las acciones a medida que se envían y verificar la diferencia de estado.

enter image description here

1
Drew Reese 13 jul. 2021 a las 09:00

Agregue clientName y Client Status a su estado inicial de Reducer también como

const initialState = {
  clientList: [],
  clientName: '',
  clientStatue: ''
}

export default function reducerName(state= initialState, action) {
  switch(action.type) {
    case ON_SUBMIT_CLIENT:
      return {
        ...state,
        clientList: [...state.clientList, action.client],
        clientName:"",
        clientStatus:"",
        clientAccessGrants:[]
      }
  }
}
0
Sebastian Richner 13 jul. 2021 a las 06:57

Si clientName y clientStatus están fuera de cleintList, puede usar este código

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: [...state.clientName, action.clientName],
    clientStatus: [...state.clientStatus, action.clientStatus],
    clientAccessGrants: [...state.clientAccessGrants, action.clientAccessGrants]
  }
} 

Pero si no puedes usar este código

case Actions.ON_SUBMIT_CLIENT:{
state.clientList.clinetName=action.client.clientName
state.clientList. clientStatus =action.client. clientStatus
          return {
            ...state,
            clientList: [...state.clientList, action.client]
          }
        }
0
Sebastian Richner 13 jul. 2021 a las 07:00