What am I doing wrong with functions in react redux?

Question

React

Hello.
I can’t understand what I’m doing wrong, there is an App container that is responsible for communicating with state and action with components

class App extends Component {

    componentDidMount() {
        this.props.vkApiActions.getFriends('')
        this.props.vkApiActions.getUser('')
    }


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


        return (

            <div className="App">


                <FriendList
                    vkApiProps={vkApiProps}
                    friends={vkApiProps.friends.response.items}
                    setFriend={this.props.vkApiActions.setFriend}/>

                <Scanner
                friend={vkApiProps.user}/>
            </div>
        );
    }
}


App.propTypes = {
    appProps: PropTypes.object.isRequired,
    vkApiProps: PropTypes.object.isRequired,
    vkApiActions: PropTypes.object.isRequired

};


function mapDispatchToProps(dispatch) {
    return {
        vkApiActions: bindActionCreators(VkApi, dispatch)
    };
}


export default connect(
    (state)=> {
        return {
            vkApiProps: state.vkApi,

            appProps: state.app
        }
    },
    mapDispatchToProps
)(App)

In the App container, functions from action work normally in props,
for example

componentDidMount() {
        this.props.vkApiActions.getFriends('')
        this.props.vkApiActions.getUser('')

but in components I get an error that setFriend is not a function

VM12897 FriendList.js:236Uncaught TypeError: _this2.props.setFriend is not a function

Answer 1

Before rendering, more functions are being worked out. add :

componentWillMount() {
    console.log(this.props.vkApiActions.setFriend);
}

add console.log(this.props.vkApiActions.setFriend) in App renderer, see what comes up before sending to FriendList. Debage every step.