Mi pregunta es por qué usamos [action.fieldName]: action.payload ?
¿Por qué no pudimos usar action.fieldName: action.payload ?
import './App.css'; import React,{useReducer} from 'react'; const initialState = { username: "", password: "", isLoggedIn: false, error: false, }; function reducer(state, action){ switch(action.type){ case "FIELD_CHANGE": return { ...state, [action.fieldName]: action.payload, } default: return state; } } function App() { const [state, dispatch] = useReducer(reducer, initialState); const { username, password, isLoggedIn, error } = state; console.log(state); return ( <div className="App"> <label htmlFor="username">Username: </label> <input type="text" name="username" onChange={(e)=> dispatch({type:"FIELD_CHANGE",fieldName:"username",payload:e.target.value})}/> <label htmlFor="password">Password: </label> <input type="text" name="password" onChange={(e)=> dispatch({type:"FIELD_CHANGE",fieldName:"password",payload:e.target.value})}/> <div> {username} </div> </div> ); } export default App; Entiendo que habrá más de un nombre de campo, pero una vez que los especifiquemos individualmente usando ...state debe agregarse automáticamente, ya que será un nombre de entrada diferente (nombre de username y password ).
por qué no pudimos usar action.fieldName: action.payload
No puede usar action.fieldName como clave, ya que generará un error. Puede usar 'action.fieldName' pero el nombre de la clave no será el valor de action.fieldName . Para usar el valor de action.fieldName como nombre de key de objeto, debe usar []
[] se llama Nombres de propiedad computados , se implementa usando la notación de corchetes (corchetes) []
Por ejemplo, si escribes el código:
const myFirstObject={property1:"cool",property2:"bad"} const testObject={[myFirstObject.property1]:myFirstObject.property2} console.log(testObject);en tu consola tienes:
{cool: "bad"}