Quiero enviar un componente externo. Quiero usar la opción 2 de este enlace [https://daveceddia.com/access-redux-store-outside-react/][1]. Mi código se ve así
const loginUser = async (data) => { return axios.get(url + "/sanctum/csrf-cookie").then(() => { axios.post(url + '/api/login', data) .then(res => { return res.data }) .catch((err) => { console.log(err); }) }) } export const handleLogin = (data) => async (dispatch) => { console.log('test'); try { const user = await loginUser(data); dispatch(actions.setUser(user)); } catch (err) { console.log(err); } }Y en mi componente
const test = (e) => { e.preventDefault; handleLogin({email: 'test@test.pl', password: 'password'}) } return ( <div className="container"> <h2>Login</h2> <form onSubmit={handleSubmit(test)}> //...No termina el código y puede contener errores, pero actualmente lo más importante para mí es por qué este código no funciona y, si a veces está mal, por qué no muestra ningún error. Creo que ese problema está en sync(dispatch) . En este ejemplo, agregué console.log para la prueba y no se mostró. Sin esa función, muestra console.log. Redux thunk también se agrega a la tienda
const store = createStore(allReducers, composeWithDevTools(applyMiddleware(thunk)))Importar tienda y usar así:
store.dispatch(actions.setUser(user));y puede obtener el estado del componente con:
store.getState().itemsno envió sus acciones en su componente y en su acción js. puede llamar a una acción en el componente mediante accesorios y despacho y no pude ver los accesorios, así que uso useDispatch y llamo a la acción handleLogin allí.
use esto en el archivo action.js:
const user = await loginUser(data)(dispatch);en cambio :
const user = await loginUser(data);luego en componente:
import {useDispatch} from "react-redux"; const dispatch = useDispatch(); const test = (e) => { e.preventDefault; dispatch(handleLogin({email: 'test@test.pl', password: 'password'})) }