Использование приставки в проекте React

Question

Я пытаюсь использовать 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 - это вызовы моего API с использованием axios. Я пропустил это, чтобы быть более понятным.

Answer 1

Вы можете подключить компонент к вашему магазину Redux, используя connect из react-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);

Эта настройка позволит вам получить доступ к состоянию Redux из любого компонента, который вы экспортируете с помощью connect вместо передачи store непосредственно через реквизиты к каждому компоненту.

Примечание: вы также получаете dispatch через реквизиты, поэтому строки this.props.store.dispatch можно уменьшить до this.props.dispatch.

Answer 2

Вы, вероятно, имели в виду default: return state;. В противном случае любое действие, кроме «LOGIN» и «LOGOUT», изменит ваше состояние входа на что-то неожиданное (обычно undefined).

Чтобы запустить рендеринг, вам необходимо обновить реквизит или внутреннее состояние компонента. Вам нужно subcribe в свой магазин и сделать это вручную или использовать connect .