在React项目中使用Redux

Question

我正在尝试在我的React项目中使用Redux。目的是要有一个给我令牌的组件。我不想将此令牌存储在我的App.js中，所以我使用redux。但是，当我尝试将更改保存到商店时，它可以工作，但不会重新渲染。这是我的代码：

App.js

import 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.js

import 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。