Im trying to update my Redux state in a component using a variable passed up to that component from a child, following a form submital callback. The form submits a users comment, which i want to store in my redux state. I'm unsure how to send this variable into the redux chain so i can use it in my action creator. I want to pass the newComment variable inside handleCommentSubmit into the this.props.getVideoComments() action creator. Here is the code:

CommentSection.js (where i want to update my state)

 //redux stuff

import {connect} from 'react-redux'

import {getVideoComments} from '../actions'



class CommentsSection extends React.Component{



    constructor(props){

        super(props)

        //this.state={comments:[], loading:false}



    }



    componentDidMount(){

        this.props.getVideoComments()



    }





    handleCommentSubmit = (newComment) =>{

        // call action creator to dist action to all reducers and update relevant states

        this.props.getVideoComments()

        //this.setState({comments: [...this.state.comments, newComment]})

        //this.setState({comments: newComments},console.log('The current state is now',this.state.comments));

        //comment is object with author and message. Add new comment to old comments

        //this.setState({comments:[...this.state.comments,newComment]},console.log(this.state, 'state updated'))



    }

    //Comments are create in comment form, passed up then sent down through commentList to individual comment rendering inside comment.js

// comment form oncommentsubmit running everytime it renders, not only on submital

    render(){

        const {comments} = this.props

        console.log({comments})

        return(

            <div>

                <span><h4> Comments </h4></span>

                <div className=ui grid> 





                    <div className = right floated eight wide column >

                        <CommentList comments={comments}/> 

                    </div>

                    <div className=left floated eight wide column>



                        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>



                    </div>

                 </div>

             </div>



        )



    }

}



//redux stuff

//called following state update

const mapStateToProps = (state) => {



    return {comments:state.videoComments}

}

export default connect(mapStateToProps,{getVideoComments:getVideoComments})(CommentsSection)

index.js (for action creators)

import React from 'react'



export const getVideoComments= ()=> {



    return (dispatch, getState)=> {



        const videoComments = getState().videoComments



        return ({

            type: 'GET_VIDEO_COMMENTS',

            payload: videoComments

        })

    }

}

videoCommentsReducer.js

import React from 'react'



 const videoCommentsReducer=function(state= [], action){ // reads in previous state

    switch (action.type){

        case 'GET_VIDEO_COMMENTS':

            return action.payload //reducer will update state to be payload.videoComments. Action only describes what happened

                                         // reducer describes how what happened effects state. Could also use previous state and action to create new data

        default: 

            return state

    }

}



export default videoCommentsReducer

index.js (in reducer folder where they are combined)

import React from 'react'

import {combineReducers} from 'redux'

import videoCommentsReducer from './videoCommentsReducer'



export default combineReducers({

    videoComments:videoCommentsReducer

})