亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在React項目中使用Redux

在React項目中使用Redux

收到一只叮咚 2021-03-30 14:13:58
我正在嘗試在我的React項目中使用Redux。目的是要有一個給我令牌的組件。我不想將此令牌存儲在我的App.js中,所以我使用redux。但是,當我嘗試將更改保存到商店時,它可以工作,但不會重新渲染。這是我的代碼:App.jsimport React, { Component } from 'react';import LoginApi from './components/LoginApi.js';import { createStore } from 'redux'import './App.css';function pops(state = { sessionToken: '', isLoggedIn: false, group: '' }, action) {    const { sessionToken, isLoggedIn, group, type } = action;    switch (type) {        case 'LOGIN':            return { sessionToken, isLoggedIn, group };        case 'LOGOUT':            return { sessionToken: '', isLoggedIn: false, group: '' };        default:            return { sessionToken, isLoggedIn, group };    }}const store = createStore(pops, { sessionToken: '', isLoggedIn: false, group: '', });class App extends Component {    render() {        return (            <div className="App container-fluid">                <div className="row text-center">                    <div className="col-3"><LoginApi store={store} /></div>                </div>            </div>        );    }}export default App;LoginApi.jsimport React from 'react';import './LoginApi.css';class LoginApi extends React.Component {    handleLogout() {        this.props.store.dispatch({ type: "LOGOUT"});    }    handleLogin() {        this.props.store.dispatch({ type: "LOGIN", sessionToken, isLoggedIn: true, group });    }    render() {        const { isLoggedIn, sessionToken } = this.props.store.getState();        console.log(this.props.store.getState());        return (            <div className="Login">                {(isLoggedIn === true && sessionToken !== "") ?                    <button type="button" className="btn btn-danger" onClick={this.handleLogout}>Logout</button>                    :                    <button type="button" className="btn btn-primary" onClick={this.handleLogin}>Login</button>                }            </div>        );    }}export default LoginApi;handleLogout和handleLogin是使用axios對我的API的調用。我跳過了此事以使其更加清晰。
查看完整描述

2 回答

?
明月笑刀無情

TA貢獻1828條經驗 獲得超4個贊

你可能是說default: return state;。否則,除了'LOGIN'和'LOGOUT'以外的任何操作都會將您的登錄狀態設置為意外的狀態(通常是undefined)。

要觸發重新渲染,您需要更新道具或組件的內部狀態。您需要到subcribe商店并手動進行操作或使用connect。


查看完整回答
反對 回復 2021-04-08
  • 2 回答
  • 0 關注
  • 212 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號