Tengo un componente React que asigna el estado a los accesorios para obtener datos a través de redux. Todo funciona bien con la acción y el valor actualizado correctamente en el reductor. Mi único problema es que cuando cambia el valor del estado, quiero que mi componente se vuelva a renderizar para que siempre muestre el valor más actualizado en el reductor. A partir de ahora, tengo que llamar a una función separada que actualiza el componente, pero prefiero que se reproduzca automáticamente cada vez que cambia el valor en el reductor.
Acción:
export const createPickup = (selected, pickups) => dispatch => { let icon; icon = check(selected); pickups.icon = icon; return API('/createPickUp/', { ...pickups, }) .then(res => { dispatch({type: types.CREATE_PICKUP, res}); }) .catch(err => console.log(err)); };Reductor:
const initialState = { pick: [], }; export default function pickup(state = initialState, action) { switch (action.type) { case types.GET_PICK: return { pick: action.pickup, }; case types.CREATE_PICKUP: return { pick: [action.res, ...state.pick], }; case types.DEL_GAME: return { pick: state.pick.filter(p => p._id !== action.id), }; case types.START_GAME: return { pick: state.pick.map(p => p._id === action.id ? {...p, start: true} : p, ), }; case types.STOP_GAME: return { pick: state.pick.map(p => p._id === action.id ? {...p, stop: true} : p, ), }; default: return state; } }Use el enlace useSelector en el componente funcional, ya que se suscribe automáticamente al estado y su componente se volverá a procesar. Si está utilizando Class Component, use connect() de redux y mapStateinProps.
Supongo que ha pasado el reductor a la tienda global. Ahora... asegúrese de tener el valor actualizado en su componente... intente consolarlo así...
import {useSelector} from 'react-redux'; const YourCmponent = () => { const reduxState = useSelector(state => state); console.log(reduxState); return <div>Your Content</div> }De esa manera, puede obtener acceso a la tienda redux. Y no necesita realizar ninguna otra función para actualizar el componente . Siempre obtendrá un valor actualizado aquí.