React-Redux: использование создателей действий в компонентах React - PullRequest
Новая
       7

React-Redux: использование создателей действий в компонентах React

0 голосов
/ 14 февраля 2019

Я новичок в React / Redux и ценю вашу помощь.Я прохожу курс удеми по этой теме.Преподаватель курса создает компонент, подобный этому. 

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

import { fetchUser } from '../actions';

class User extends Component {
    componentDidMount(){
        this.props.fetchUser(this.props.userId);
    }

    render(){
        const { user } = this.props;

        if(!user) return null;

        return(
            <div className="header"> User Info: {user.name}</div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return { user: state.users.find( user => user.id === ownProps.userId)};
};

export default connect(mapStateToProps, { fetchUser })(User)

мой вопрос: почему внутри componentDidMount() он ставит префикс fetchUsers() с this.props?это не тот случай, когда он передает fetchUsers() как реквизит от родительского компонента.Вот как родитель использует этот компонент <User userId={post.userId}/>

Примечание: этот код работает

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Именно из-за этой строки:

export default connect(mapStateToProps, { fetchUser })(User)

второй параметр в connect называется mapDispatchToProps, добавляет действия в реквизит

В документах :

connect может принимать аргумент mapDispatchToProps, который позволяет создавать функции, которые отправляются при вызове, и передавать эти функции в качестве реквизитов для вашего компонента. 

const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' })
  }
}

Ваш код использует форму «Сокращения объекта».

0 голосов
/ 14 февраля 2019

Способ mapDispatchToProps в примере сокращен.Может быть проще сказать, что происходит, если бы оно было написано так: 

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

import { fetchUser } from '../actions';

class User extends Component {
    componentDidMount(){
        this.props.fetchUser(this.props.userId);
    }

    render(){
        const { user } = this.props;

        if(!user) return null;

        return(
            <div className="header"> User Info: {user.name}</div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return { user: state.users.find( user => user.id === ownProps.userId)};
};

const mapDispatchToProps = () => ({
  fetchUser
});

export default connect(mapStateToProps, mapDispatchToProps)(User)

Может быть, это показывает это более четко, но функция диспетчеризации (fetchUser) сопоставляется со свойствами компонентов.Точно так же, как значение состояния (пользователь) сопоставляется со свойствами компонента.Я думаю, вы просто запутались из-за сокращения, которое было использовано.

...