Quiero usar redux en mi aplicación react typescript
He podido crear una tienda redux y
también enviar a redux
Quiero que me envíen el valor a la tienda
usando useSelector pero recibo este error
Too many re-renders. React limits the number of renders to prevent an infinite loop.Mi código
UsuarioReductor
export const userReducer = (state=null, action) => { switch(action.type){ case "LOGIN": return action.payload; case "LOGOUT": return action.payload; case default: return state; } }Inicio de sesión.tsx
import React, { useState } from "react"; import {useDispatch, useSelector} from 'react-redux' const Login = () => { const reduxState= useSelector((state) => state); dispatch({ type: "LOGIN", payload: "token" }); return ( <div className="__login"> {JSON.stringify(reduxState)} </div> ) }; export default Login;Aplicación.tsx
import React from 'react'; function App() { return ( <div className="App"> <Routes> <Route path="/login" element={ <Login />} /> </Routes> </div> ); } export default App;índice.tsx
importar React desde "react";
import { createStore } from "redux"; import { Provider } from "react-redux"; import { composeWithDevTools } from "redux-devtools-extension"; import rootReducer from "./reducers"; // create store const store = createStore(rootReducer, composeWithDevTools()); ReactDOM.render( <Provider store={store}> <BrowserRouter> <App /> </BrowserRouter> </Provider>, document.getElementById("root") ); reportWebVitals();cerrar sesión.tsx
Cerrar sesión es donde hago clic para cambiar el estado de la aplicación eliminando el token y cambiando el estado a nulo
import React, { useState } from "react"; import {useDispatch, useSelector} from 'react-redux' const logout= () => { const reduxState= useSelector((state) => state); const logoutApp = () => { dispatch({ type: "LOGOUT", payload: null }); } return ( <div className="__login"> <span onClick={logoutApp}>logout</span> </div> ) }; export default logout;Su envío está justo dentro del componente de inicio de sesión. reaccionar componente funcional ejecuta todo en el componente en cada uno de sus renderizados.
import React, { useState } from "react"; import {useDispatch, useSelector} from 'react-redux' const Login = () => { const reduxState= useSelector((state) => state); dispatch({ //This dispatch will call on it's every render, so after success login it will call dispatch again, and then again ... it leads to an infinite loop type: "LOGIN", payload: "token" }); return ( <div className="__login"> {JSON.stringify(reduxState)} </div> ) }; export default Login;El mejor método es moverlo a un clic de botón. o a un useEffect.
Método 1, inicie sesión al hacer clic en el botón
import React, { useState } from "react"; import {useDispatch, useSelector} from 'react-redux' const Login = () => { const reduxState= useSelector((state) => state); const login = () => { dispatch({ type: "LOGIN", payload: "token" }); } return ( <div className="__login"> {JSON.stringify(reduxState)} <button onClick={login} >login</button> </div> ) }; export default Login;Método 2. Llámalo en useEffect
import React, { useState,useEffect } from "react"; import {useDispatch, useSelector} from 'react-redux' const Login = () => { const reduxState= useSelector((state) => state); useEffect(() => { dispatch({ type: "LOGIN", payload: "token" }); },[]) //this useEffect will only call on its first render return ( <div className="__login"> {JSON.stringify(reduxState)} </div> ) }; export default Login;