Issues with initialising Redux in React while using mapDispatchToProps

Question

I'm trying to learn some redux. Component I'm working on is a simble <div> based button that - when clicked - passes value as a parameter to the dispatch, so it can be displayed later someplace else.

After following both documentation and tutorials over the web I came up with the following code:

main app container

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from './../store/configureStore.js'
import Input from './input.js'

let store = configureStore()

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Input />
            </Provider>
        )
    }
}

button container

import React, { Component } from 'react'
import { connect } from 'react-redux'
import printOut from './../actions/actions.js'
import InputComponent from './../components/inputComponent.js'
import PropTypes from 'prop-types'

const mapDispatchToProps = (dispatch) => {
    return {
        onClick: (input) => dispatch(printOut(input))
    }
}

const Input = connect(mapDispatchToProps)(InputComponent)

export default Input

button component

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Input extends Component {
    render() { 
        return (
            <div style={style} onClick={this.props.onClick('lala')}>Button!</div>
        )
    }
}
Input.PropTypes = {
    onClick: PropTypes.func.isRequired
}
const style = {
    height: 30, 
    width: 100, 
    backgroundColor: '#ff4068'
}

export default Input

Application breaks. I got this from the console:

Uncaught TypeError: (0 , _actions2.default) is not a function
    at Object.onClick (index.js:33683)
    at Input.render (index.js:33743)
    (...)
index.js:22443 The above error occurred in the <Input> component:
    in Input (created by Connect(Input))
    in Connect(Input) (created by App)
    in Provider (created by App)
    in App

From what little I understood, there are some issues with button component and the way I'm trying to pass the param to props. So I tried to change it a little and added a function to handle that before render.

...
onClick(input) {
    return this.props.onClick(input)
}
render() {
    return (
        <div style={style} onClick={onClick('lala')}>Button!</div>
    )
}
...

The error I get this time is onClick is not defined. Oh, ok. I forgot this keyword before calling this new function. So I add it to the component and now I have

<div style={style} onClick={this.onClick('lala')}>Button!</div>

But the error being returned didn't really changed - it's again the original error of Uncaught TypeError: (0 , _actions2.default) is not a function

I'm starting to run out of ideas now. Could someone please tell me how what my be the issue here? Help me Stack Overflow, you're my only hope! to quote timeless classic.

Answer 1

Are you sure you are importing printOut in properly? Shouldn't it be import { printOut } from './../actions/actions.js' ?

Then, first argument in connect is mapStateToProps and the second is mapDispatchToProps this is probably why you have dispatch is not a function.

Answer 2

You are importing InputComponent:

import InputComponent from './../components/inputComponent.js'

but inside button component you are exporting it as Input:

export default Input

so change InputComponent with :

import Input from './../components/inputComponent.js'

Use this for connect

export default connect(mapDispatchToProps)(Input)