Как получить `this` из действия в приложении реагировать на избыточность?

Question

import React, { Component } from 'react';
import { connect } from 'react-redux';

class App extends Component {
    state = {
        isLogin: false
    }

    render() {
        <div>
            <h1>{isLogin "Logined" : "Not logged" }</h1>
            <button onClick={this.props.handleLogin}>Login</button>
        </div>
    }
}

export default connect(
    state => ({
        user: state.user
    }),

    dispatch => ({
        handleLogin: e => {
            typeof this // "undefined"
            this.setState({isLogin: true});
            dispatch('LOGIN');
        }
    })
)(App);

Мне нужно позвонить this.setState(...); Я использую этот метод, получая this от Компонента

import React, { Component } from 'react';
import { connect } from 'react-redux';

class App extends Component {
    state = {
        isLogin: false
    }

    render() {
        <div>
            <h1>{isLogin "Logined" : "Not logged" }</h1>
            <button onClick={this.props.handleLogin(this)}>Login</button>
        </div>
    }
}

export default connect(
    state => ({
        user: state.user
    }),

    dispatch => ({
        handleLogin: _this => e => {
            _this.setState({isLogin: true});
            dispatch('LOGIN');
        }
    })
)(App);

Я не считаю это решение верным.Как это сделать правильно?

Answer 1

Вы не можете получить доступ к this.setState из-за пределов контекста компонентов приложения.

Если я правильно вас понимаю, вы хотите проверить, вошли ли вы в компонент.

Я предлагаю иметь свойство в state.user, которое называется примерно так: isAuthenticated и использовать его вместо своей логики.

this.props.user.isAuthenticated ? 'logged in' : 'not logged in'

В качестве альтернативы вы можете вызвать функцию, которая выполняет оба изменения внутри контекста.

jsx

onClick={() => this.myOnClick()}

компонент

myOnClick = () => {
  this.setState({isLogin: true}); 
  this.props.handleLogin(); 
}

Немного неясно, что вы пытаетесь сделать, хотя :)

Answer 2

Весь смысл использования избыточности состоит в том, чтобы иметь «глобальное» состояние в хранилище.Создатель действия возвращает объект, который отправляется редуктору, который затем возвращает обновленное состояние.Thunk позволяет отложить оценку объекта действия.

Собрав все это вместе, вы можете сделать что-то вроде этого:

export default connect(
    state => ({
        user: state.user,
        isLogin: state.isLogin,
    }),

    dispatch => ({
        handleLogin: e => {
            dispatch('LOGIN');
        }
    })
)(App);

Теперь вам нужен редуктор, который определяет, что делать с'LOGIN' действие:

reducer = (state = {}, action) => {
    switch (action) {
        case 'LOGIN':
            return Object.assign({}, state, {isLogin: true});
    }
}

Answer 3

Вы можете установить свой стет внутри компонента, а затем вызвать опору.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class App extends Component {
    state = {
        isLogin: false
    }
    handleLogin = () => {
      this.setState({ isLogin: true })
      this.props.handleLogin()
    };
    render() {
        <div>
            <h1>{isLogin "Logined" : "Not logged" }</h1>
            <button onClick={this.handleLogin}>Login</button>
        </div>
    }
}

export default connect(
    state => ({
        user: state.user
    }),

    dispatch => ({
        handleLogin: e => {
            dispatch('LOGIN');
        }
    })
)(App);

в примере с Realword вы должны установить флаг loggedIn в вашем магазине Redux, а не в компоненте.