Reactjs使用Selector重新渲染过多.React限制渲染次数，以防止出现无限循环

Question

我想在我的react typescript应用程序中使用redux

我已经能够创建redux存储和

同时调度以减少

我想将价值发送到商店

使用useSelector，但我得到这个错误

Too many re-renders. React limits the number of renders to prevent an infinite loop.

我的代码

UserReducer

export const userReducer = (state=null, action) => {
switch(action.type){
case "LOGIN":
return action.payload;
case "LOGOUT":
return action.payload;
case default:
return state;
}
}

登录.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;

App.tsx

import React from 'react';
function App() {
return (
<div className="App">
<Routes>
<Route  path="/login" element={ <Login />} />
</Routes>

</div>
);
}
export default App;

index.tsx

import React from"；反应"；；

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();

注销.tsx

注销是指我单击以通过删除令牌来更改应用程序的状态，并将状态更改为空

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;

Answer 1

您的调度就在登录组件内部。react函数组件在每次渲染时运行组件中的所有内容。

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;

最好的方法是将其移动到单击按钮。或达到有用的效果。

方法1，点击按钮登录

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;

方法2。称之为使用效果

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;