Estoy implementando una funcionalidad de búsqueda usando reaccionar y redux thunk. El requisito para esta búsqueda es llamar a fetchApi en el procesador y actualizar el estado para que podamos mostrarlo. La parte de la interfaz de usuario es así:
function Search({fetchDataApi}) { const [data, setData] = useState([]) const [token, setToken] = useState('') const dataFromState = useSelector(state=>state.newData) || [] const handleSubmit = () => { fetchDataApi(token) // dispatch new data inside.It get updated by checking getState() setData(dataFromState) } const handleOnChange =(e)=> { setToken(e.target.value) } return ( <div className="App"> <input onChange={handleOnChange}/> <button onClick={handleSubmit}>Search</button> {data.map(item=><li>{item}</li>)} </div> ); } export default App;Cuando hago clic en el botón por primera vez, recibí una llamada de API y el estado también se actualizó, pero useSelector no lo devolverá en tiempo real, por lo que solo vaciar la matriz establecida por setData. Cuando hago clic en el botón por segunda vez, aparecen los datos. ¿Es algo con el useSelector u otra razón para causar este problema? Esta es la acción thunk que simplifico:
const fetchDataApi = async(token, getState, dispatch) => { ...error handle const response = await api(token) dispatch(setNewData(response)) ...console.log(getState()) // get updated successfully }setNewData es una acción regular que coincide con el reductor Este es el setNewData:
export const setNewData= (data)= ({ type: 'SET_NEW_DATA' data })Creo que este post responde perfectamente a mi pregunta. El valor de estado de redux cambió en el segundo clic Resuelvo este problema usando useEffect. Gracias por la comprobación.
Creo que el problema está dentro de su función handleSubmit. Está llamando a setData cuando es posible que 'dataFromState' aún no se haya actualizado.
También parece que ese estado local adicional es innecesario. Mapearía dataFromState en lugar de mantener una copia exacta. Vea abajo:
function Search({fetchDataApi}) { const [token, setToken] = useState('') const dataFromState = useSelector(state=>state.newData) || [] const handleSubmit = () => { fetchDataApi(token) // dispatch new data inside.It get updated by checking getState() } const handleOnChange =(e)=> { setToken(e.target.value) } return ( <div className="App"> <input onChange={handleOnChange}/> <button onClick={handleSubmit}>Search</button> {dataFromState.map(item=><li>{item}</li>)} </div> ); } export default App;