在React项目中使用Redux

Question

我正在尝试在我的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的调用。我跳过了此事以使其更加清晰。

Answer 1

你可能是说default: return state;。否则，除了'LOGIN'和'LOGOUT'以外的任何操作都会将您的登录状态设置为意外的状态（通常是undefined）。

要触发重新渲染，您需要更新道具或组件的内部状态。您需要到subcribe商店并手动进行操作或使用connect。