Uncaught TypeError: Невозможно прочитать свойство 'props' из undefined (actjs) (очень просто)

Question

Я следовал этому уроку для начинающих по редуксу: text , vid .

Все работает, за исключением кнопки увеличения. Когда я нажимаю кнопку увеличения, я получаю эту ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'props' из неопределенного

Посмотрите, что происходит: GIF

Почему я получаю эту ошибку, когда я сделал "mapStateToProps"?

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Test_left from './eo_app.jsx';
import { Provider } from 'react-redux';
import { createStore } from "redux";

const initialState = {
    count: 21
};

const reducer = (state = initialState, action) => {
    console.log('reducer', action);

    switch (action.type) {
        case 'INCREMENT':
            return { count: 55 };
        default:
                return state;
    }
};

const store = createStore(reducer);


const App = () => (
  <Provider store={store}>
    <Test_left />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('target'));

//// store.dispatch({type: 'INCREMENT' }); this will work as expected

eo_app.jsx

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


class Test_left extends React.Component {
    constructor(props) {
        super(props);
    }

    increment () {
    this.props.dispatch({ type: 'INCREMENT' }); // <== ERROR IS RAISED HERE
  }

    render() {
        console.log('props:', this.props)
        return (
                <React.Fragment>
                    <h1> WE GOT RENDERED </h1>
                    <h1>{this.props.count}</h1>
                    <button onClick={this.increment}> Increment </button>
                </React.Fragment>
        )
    };
}

const mapStateToProps = state => ({
    count: state.count
})

export default connect(mapStateToProps)(Test_left);

Answer 1

Когда вы делаете: this.props.dispatch, он вызывает диспетчеризацию, сопоставленную с соединением. Но у вас нет карты для отправки:

export default connect(mapStateToProps)(Test_left);

Итак, замените предыдущий код на:

export default connect(mapStateToProps, mapDispatchToState)(Test_left);

Теперь определите функцию для mapDispatchToState и вызовите диспетчеризацию там.

---

Ключевая проблема, которую я забыл упомянуть, заключается в том, что необходимо связать this, поскольку this будет неопределенным при вызове внутри метода. Или вы можете назначить метод открытого класса :

increment = () => { // now, this will be accessible

---

PS: См. в этом посте , почему вам нужно использовать диспетчеризацию карты вместо прямой ее отправки. Имеет смысл не смешивать карты соединений с прямой отправкой.

Answer 2

EDIT:

На самом деле есть две проблемы:

Во-первых, вам нужно связать свою функцию increment с самим классом. Это обычная «ошибка», о которой вы можете прочитать здесь - https://reactjsnews.com/es6-gotchas

Во-вторых, с react-redux и функцией connect вам необходимо отобразить функцию redux dispatch на реквизит. Это делается с помощью второй функции, которую вы передаете при вызове connect: mapDispatchToProps.

Ваш может выглядеть так:

const mapDispatchToProps = dispatch => ({
    handleClick: () => dispatch({ type: 'INCREMENT' })
});

С этими двумя изменениями ваш компонент будет выглядеть как

class Test_left extends React.Component {
    constructor(props) {
        super(props);

        // Bind `increment` to this class's scope
        this.increment = this.increment.bind(this);
    }

    increment () {
        // Use newly created prop function to dispatch our action to redux
        this.props.handleClick();
    }

    // ...
}

const mapStateToProps = state => ({
    count: state.count
});
const mapDispatchToProps = dispatch => ({
    handleClick: () => dispatch({ type: 'INCREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Test_left);