How to reference a react component's state in a redux helper function

Question

I'm new to redux, and I can find lots of info on how to pass a redux state to the component, but not the other way round, so I'm not sure if I'm searching the correct vocabulary. But Essentially I want to be able to reference the current state of a react component in a redux helper function, this is what I've done - and I'm getting TypeError: dispatch is not a function and handleSubmit is just launching as soon as the page is loaded:

App.js

render() {
  return (
    <div className="App">
      <p>{this.state.id}</p>
      <form onSubmit={this.handleSubmit(this.state.id)}>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

const mapDispatchToProps = dispath => bindActionCreators({ 
  handleSubmit
}, dispath);

export default connect(
  mapDispatchToProps  
)(App);

reducers.js

export const handleSubmit = (test) => {
  window.open("http://localhost:5000/"+test);
}

//Reducer
export default (state = [], action) => {
  switch (action.type) {
    default:
      return state;
  }
};

Answer 1

First, you don't use the function that react-redux pass through the props and try to call handleSubmit on the component itself.

You are also calling the function inside onSubmit immediately instead of passing a reference to a function so wrap it in an arrow function and use handleSubmit from this.props

onSubmit={() => this.props.handleSubmit(this.state.id)}

Second, the first argument to connect is the mapping function to get a slice of the state called mapStateTpProps by convention, pass in null as the first argument.

there is also no need to use bindActionCreators and you can just pass an object with functions and react-redux will wrap them in dispatch for you

export default connect(
  null,
  { handleSubmit }  
)(App);

Answer 2

You need to put id to the state of App and manage it through redux. Code below will help you.

// App.js

render() {
  return (
    <div className="App">
      <p>{this.props.id}</p>
      <form onSubmit={this.props.ActionSubmit(this.props.id)}>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

const mapStateToProps = store => ({
    id: store.appReducer.id,
})

const mapDispatchToProps = dispath => bindActionCreators({ 
  ActionSubmit
}, dispath);

export default connect(
  mapStateToProp,
  mapDispatchToProps  
)(App);

// reducers.js

export ACTION_SUBMIT = 'ACTION_SUBMIT'

export const ActionSubmit = id => ({
    type: ACTION_SUBMIT,
    payload: {
        id,
    }
})

const initialState = {
    id: 0,
}

const doSubmit = (id) => {
  window.open("http://localhost:5000/"+id);
}

export default AppReducer(state = initialState, action) {
    switch(action.type) {
        case ACTION_SUBMIT:
            doSubmit( action.payload.id)
            return {
                id: action.payload.id,
            }
        default:
            return state
    }
}