Javascript 如何将一个react组件到主app.js的布尔值设置为false

正在尝试使用handle submit函数将使用react router的主app.js文件上的IsAuthenticated从false更改为true。。我看到的所有redux示例都使用了一个appjs文件，该文件上有onclick函数，而不是react router。如果你能帮忙，谢谢你

函数应用程序（）{
返回(
);
}
导出默认应用程序；

具有单击事件的my login.js

const Login=（）=>{
const history=useHistory（）
常量[状态，设置状态]=使用状态({
电子邮件：“”，
密码：“”
});
const[validate，setValid]=useState({
validateEmail:“”，
validatePassword:“”，
}) 
常量handleInputChange=事件=>设置状态({
……国家，
[event.target.name]：event.target.value，
})
const handleSubmit=user=>{
如果（state.password===''）{
setValid（{validatePassword:true}）
}
如果（state.email==''）{
setValid（{validateEmail:true}）
}
post（`auth/login`，state）
。然后（res=>{
控制台日志（res）；
console.log（res.data）；
如果（资源状态===200）{
history.push（'/mainpage'）；
}  
})
.catch（函数（错误）{
console.log（错误）；
警报（'错误的用户名或密码'）
window.location.reload（）；
});
}
//console.log（'state'，state）
const{email，password}=state
const[PopoOverOpen，setPopoOverOpen]=useState（false）；
常量切换=（）=>SetPopoOverOpen（！PopoOverOpen）；
返回(
关于加密跟踪器
关于
您的个性化金融应用程序可跟踪所有潜在的加密货币投资
欢迎
____________
电子邮件
请输入电子邮件
密码
请输入密码
handleSubmit（state）}className=“但lg btn暗btn块”>登录
或者使用Google帐户登录
|
);
}
导出默认登录；

使用asyncthunk的authslice.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from '../../../server/routes/authRoutes'

const fetchAuth = createAsyncThunk(
    'auth/login',
    async (userId, thunkAPI) => {
      const response = await userAPI.fetchById(userId)
      return response.data
    }
  )

  const authSlice = createSlice({
    name: 'isAuthenticated',
    initialState: {
      value: false,
    },
    reducers: {
    //   Authenticated: state => {
        // Redux Toolkit allows us to write "mutating" logic in reducers. It
        // doesn't actually mutate the state because it uses the Immer library,
        // which detects changes to a "draft state" and produces a brand new
        // immutable state based off those changes
        // state.value = true;
    //   },
    },
    extraReducers: {
        [fetchAuth.fulfilled]: state  => {
            // Add user to the state array
                state.value = true
          },
        [fetchAuth.rejected]: state => {
            // Add user to the state array
            state.value = false
        }
    }
  });

  dispatch(fetchUserById(123))
  
//   export const { increment, decrement, incrementByAmount } = counterSlice.actions;

---

如果您使用某种全局存储来存储这些值，这将很容易实现。典型的选项包括Redux、Mobx等

---

将您的

isAuthenticated

变量定义为全局存储变量。使用相应的包方法（如Redux dispatch events）或应用程序中其他任何地方的类似功能来更改其值。

您可以使用Redux尝试，创建登录变量的存储，并与组件app.js共享。

从未使用过Redux我必须安装它是的，你需要安装和设置商店。好的，现在就这么做。我可以保持login.js代码不变，并保留提交句柄吗。因为我不认为我可以在app.js中添加句柄sumbit，因为它只是routes@AjeetShah添加的coderedux工具包文档没有显示如何使用react路由器。我只看到on-click功能直接用于app.js文件，与我的不同，事件位于另一个文件中。请执行以下操作：1。使用以下官方Redux工具包模板创建一个新的React项目：2。在本地运行并使用它3。看看他们是如何完成商店设置的。复制存储设置的代码，并使用该代码在项目中设置存储。5.创建切片（异步操作和extraReducer）：：使用此asyncThunkAction进行身份验证HTTP调用，成功后，存储一个

boolean

像

logged:true/false

6。在专用路由组件中，从Store 7中选择

logged

布尔值。完成！在第5步中，我是否应该导入axios而不是asyncThunk示例中使用的“import{userAPI}from./userAPI”来使用axios而不是userAPI