Quiero crear una pequeña aplicación de chat, tiene un tablero de mensajes, una entrada de texto y un botón para enviar. Hago esto para el aprendizaje de React/Redux . Estoy familiarizado con React y obtuve el concepto de Redux . Pero ahora mismo, tengo un problema y no encontré nada en mis búsquedas.
Quiero capturar y enviar datos de entrada de texto cuando presiono el botón Enviar. En reacción pura, vinculo la entrada de texto a un estado a través useState . Ahora mismo con Redux, no sé qué puedo hacer. ¿Cómo puedo pasar el valor de entrada de texto a una acción específica? Lo que necesito es muy simple, capturar el valor de entrada de texto. Pero no puedo encontrar ningún recurso para esto. No estoy buscando cosas como Formulario o enviar un formulario, no hay envío de datos al servidor, etc., solo obtengo el valor de entrada. No sé si es posible pasar algún argumento a las acciones de Redux para almacenarlas.
No puedo encontrar ningún tutorial o recursos. Cualquier ayuda será apreciada.
Antes de agregar redux, una solución simple con un estado interno se ve así:
import React, {useState} from 'react' const Sample = () => { const [inputValue, setInputValue] = useState(""); const handleChange = (e) => { setInputValue(e.target.value) } return( <input type='text' value={inputValue} onChange={handleChange} /> ) }Ahora, pruébalo con la implementación redux:
import React from 'react'; import {useDispatch, useSelector} from 'react-redux'; const Sample = () => { const dispatch = useDispatch(); const inputValue = useSelector(state => state.sample.value) const handleChange = (e) => { dispatch({type: 'CHANGE_INPUT_VALUE`, payload: e.target.value}) } return( <input type='text' value={inputValue} onChange={handleChange}> ) }el reductor podría verse así:
const initialState = { value: ""; } const sampleReducer = (state=initialState, action) => { switch(action.type){ case 'CHANGE_INPUT_VALUE': return{ ...state, value: action.payload } // other cases ... default: return state } }Prefiero definir acciones y selector en archivos separados e importarlos donde lo necesiten:
Ejemplo de archivo de acción:
export const CHAGNE_INPUT_VALUE = 'CHANGE_INPUT_VALUE'; export const changeInputValue = (value) => ({type: CHAGNE_INPUT_VALUE, payload: value})Archivo selector de muestra:
export const selectInputValue = (state) => state.sample.valueAhora aplíquelos al componente Muestra:
import React from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {changeInputValue} from 'path/to/action/file'; import {selectInputValue} from 'path/to/selector/file'; const Sample = () => { const dispatch = useDispatch(); const inputValue = useSelector(selectInputValue) const handleChange = (e) => { dispatch(changeInputValue(e.target.value)) } return( <input type='text' value={inputValue} onChange={handleChange}> ) }Ahora, volviendo a la pregunta: sí, podría agregar cualquier cosa como carga útil al reductor, por ejemplo:
dispatch(updateUserProfile({name: "", age: 0, image: "", children: [], ...})) case UPDATE_PROFILE: return { ...state, name: action.payload.name, age: action.payload.age, }Puede enviar una acción que acepte el valor de entrada cuando se presiona el botón Enviar. Luego puede realizar las acciones requeridas en el valor capturado en su reductor de redux.
Envíe una acción desde su componente.
import React, {useRef} from 'react' import {useDispatch} from 'react-redux' export default function App(){ const textVal = useRef() const dispatch = useDispatch() function sendTextValueHandler(){ const inputVal = textVal.current.value dispatch({type:'INP_VAL', message: inputVal}) //Pass input value to redux store } return( <input type='text' ref={textVal}/> <button onClick={sendTextValueHandler}>Send</button> ) }En tu tienda redux,
const reducer = (state={message:''},action)=>{ if(action.type === 'INP_VAL'){ const inputValue = action.message //Capture the input value and do the required operation. return {...state,message:inputValue} } . . . return state } const store = useStore(reducer) export default storeLos fragmentos anteriores son ejemplos estructurales básicos de cómo puede realizar esta tarea. Una vez que comprenda la esencia, puede migrar aún más al uso de redux-toolkit, que ofrece más flexibilidad y una mejor segmentación del código.
hay un método onChange en reaccionar para las entradas. y hay una biblioteca llamada redux thunk para realizar una lógica adicional a la acción y pasar algunos argumentos.
por favor elabore su pregunta si la respuesta no es suficiente