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

您可以使用connect中的react-redux将组件连接到Redux存储。

App.js

import { Provider } from 'react-redux'

... rest of code ...

class App extends Component {
    render() {
        return (
            // Set up a provider context
            <Provider store={store}>
                <div className="App container-fluid">
                    <div className="row text-center">
                        <div className="col-3"><LoginApi/></div>
                    </div>
                </div>
            </Provider>
        );
    }
}

LoginApi.js

import React from 'react';
// Import connect
import { connect } from 'react-redux';
import './LoginApi.css';

class LoginApi extends React.Component {
    handleLogout() {
        // We get ``dispatch`` through props now
        this.props.dispatch({ type: "LOGOUT"});
    }

    handleLogin() {
        // We get ``dispatch`` through props now
        this.props.dispatch({ type: "LOGIN", sessionToken, isLoggedIn: true, group });
    }

    render() {
        // Access the props here
        const { sessionToken, isLoggedIn } = this.props;

        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>
        );
    }
}

// This allows you to control how your Redux store
// is mapped to this component's props.
const mapStateToProps = (state) => {
    const { isLoggedIn, sessionToken } = state;

    return {
        sessionToken,
        isLoggedIn,
    };
};

// Wrap your export with connect and pass it mapStateToProps
export default connect(mapStateToProps)(LoginApi);

此设置将允许您从使用connect导出的任何组件访问Redux状态，而不是将store直接通过prop传递给每个组件。

注意：您还可以通过道具获得dispatch，因此行this.props.store.dispatch可以简化为this.props.dispatch。

Answer 2

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

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

在React项目中使用Redux

2 个答案: