如何从一个反应组件到主 app.js 将布尔值设置为 false

Posted 2023-02-22

【中文标题】如何从一个反应组件到主 app.js 将布尔值设置为 false

【英文标题】：how do a set a boolean value to false from one react component to main app.js

【发布时间】：2021-05-31 09:22:36

【问题描述】：

尝试使用句柄提交功能将 isAuthinticated 从 false 更改为 true，这是使用 react 路由器的主 app.js 文件。我查看的所有 redux 示例都使用具有onclick 功能对它没有反应路由器。如果你能帮忙，谢谢

function App () 
    return (
      <Router>
      <div>
        <Switch>
          <Route exact path="/" component=Login />
          <Route exact path="/login" component=Login />
          <Route exact path="/signup" component=Signup />
          <PrivateRoute 
          exact path="/mainpage" 
          component=MainPage 
          isAuthenticated=false
          />
        </Switch>
      <Footer />
      </div>
    </Router>
    );
  
export default App;

我的 login.js 有点击事件

const Login = () => 
  const history = useHistory()
  const [state, setState] = useState(
    email: '',
    password: ''
   );
  
  const [validate, setValid] = useState(
   validateEmail: '',
   validatePassword: '', 
  ) 
  
  
const handleInputChange = event => setState(
    ...state,
    [event.target.name]: event.target.value,
  )

  const handleSubmit = user => 
    if(state.password === '')
     setValid(validatePassword:true)
    
    if(state.email === '' )
     setValid(validateEmail:true)
    

    axios.post(`auth/login`, state )
    .then(res => 
      console.log(res);
      console.log(res.data);  
      if (res.status === 200 ) 
        history.push('/mainpage');
        
    )
    .catch(function (error) 
      console.log(error);
      alert('Wrong username or password')
      window.location.reload();
    );
  


  // console.log('state', state)
  const email, password  = state

  const [popoverOpen, setPopoverOpen] = useState(false);

  const toggle = () => setPopoverOpen(!popoverOpen);
 
    return (
    <>
      <Container>
        <Row>
          <Col>
          <img src=logo  id="logo" /> 
            <Button id="Popover1" type="button">
               About Crypto-Tracker
            </Button>
          <Popover placement="bottom" isOpen=popoverOpen target="Popover1" toggle=toggle>
            <PopoverHeader>About</PopoverHeader>
            <PopoverBody>Your personalized finance app to track all potential cryptocurrency investments</PopoverBody>
          </Popover>
          </Col>
          <Col sm="2" id="home" style=height: 500>
            <Card body className="login-card">
              <Form className="login-form">
                <h2 className="text-center">Welcome</h2>
                <h3 className="text-center">____________</h3>
                <FormGroup>
                  <Label for="exampleEmail">Email</Label>
                  <Input invalid=validate.validateEmail  onChange = handleInputChange value = email type="email"  required name="email" placeholder="email" />
                  <FormFeedback>Please enter email</FormFeedback>
                </FormGroup>
                <FormGroup>
                  <Label for="examplePassword">Password</Label>
                  <Input invalid=validate.validatePassword   onChange = handleInputChange value = password type="password" required name="password" placeholder="password"/>
                  <FormFeedback>Please enter password</FormFeedback>
                </FormGroup>
                <Button  onClick=()=> handleSubmit(state) className="but-lg btn-dark btn-block">Login</Button>
                <div className="text-center pt-3"> or sign in with Google account</div>
                <Loginbutton />
                <div className="text-center">
                  <a href="/signup"> Sign up</a>
                  <span className="p-2">|</span>
                  <a href="/ForgotPw">Forgot password</a>
                </div>
              </Form>
            </Card>
          </Col>
        </Row>
      </Container>
    </>
    );
  

export default Login;

authslice.js 使用 asyncthunk

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;

【问题讨论】：

@AjeetShah 添加代码

redux 工具包文档没有显示使用我所看到的反应路由器。我只看到点击功能直接与 app.js 文件一起使用，不像我的事件在另一个文件中

这样做：1. 使用这个官方 Redux Toolkit 模板创建一个新的 React 项目：github.com/reduxjs/cra-template-redux#usage 2. 在本地运行它并使用它 3. 看看他们是如何完成 Store Setup 4. 复制 Store setup 的代码并使用它在项目中设置 store。 5. 创建 Slice（异步操作和 extraReducer）：redux-toolkit.js.org/api/createAsyncThunk：使用此 asyncThunkAction 进行 AUTH HTTP 调用，并在成功时存储 boolean，如 logged: true/false 6. 在您的私有路由组件中，select 来自 Store 7 的 logged 布尔值。完成！

通过第 5 步，我应该导入 axios 而不是他们在 asyncThunk 示例中的“import userAPI from './userAPI'”

***.com/a/62964704/2873538.Yes 使用 axios 代替 userAPI

【参考方案1】：

您可以使用 Redux 进行尝试，为登录变量创建一个存储，并与组件 App.js 共享它。

【参考方案2】：

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

将您的isAuthenticated 变量定义为全局存储变量。使用相应的包方法（例如 Redux 调度事件或应用程序中其他任何地方的函数）中的类似方法来改变它的值。

【讨论】：

从来没有用过redux，我必须安装那个

是的，您需要安装和设置商店。

好吧，现在就这样做。我可以保持 login.js 代码相同并将句柄提交保留在那里吗？因为我不认为我可以在 app.js 中添加句柄 sumbit，因为它只是路由