State and Props
In React-redux application there is a local state and store state (state of the application). Local state is managed in isolation inside of the component. In order for more than one component to have access to the state, Redux store will be used. “A store holds the whole state tree of your application.” (Redux.js.org)
To update the data we use State in React. State is an object that holds dynamic data that changes based on the user’s input. State belongs to component where its defined. State can be passed to child components using props. I initialized my local state inside of my CommentsForm Container:
state = { content: ‘’, video_id: ‘’ }
In order to update my state I use method setState():
handleChange = e => { const { name, value } = e.target
I render the properties of state in my render method. render() { return ( <form onSubmit={ this.handleSubmit }>
Content:
<input type=’text’ value={this.state.content} onChange={this.handleChange} name=”content”/> < br />
Video Id:
<input type=’text’ value={this.state.video_id} onChange={this.handleChange} name=”video_id”/> < br /> </form>
I’m declaring “addComment” attribute to CommentInput Component and then assign the value of {this.props.addComment} as well as “videoId” attribute To CommentsList Component and then assign the value of {this.props.videoId}. In this example, data will be updated using Redux store state. I’m using actions where I create ‘addComment” function and reducers of the Redux store to change the state. Our React component does not know about the state unless we map it out as a prop and make it accessible. mapStateToProps is a function and used when store state changes and returns an object of data.
const mapStateToProps = state => { return { comments: state.comments } }
This function accepts state as an argument and connect() function will pass in store state as an argument and return a new object with a property with a part of the state that you want. We will be able to access the part of the Redux store state as a prop inside of a class or functional component via this.props or props.comments inside my functional component. To update the store we use dispatch which is Redux method. It will take dispatch as an argument, it’s concerned with providing action/dispatch to our component through props and returns a new object with a value of action creator ‘addComment’ and provide this method to the component it’s being connected to as a read only prop.
My CommentsContainer: export default connect(null, { fetchComments, addComment })(CommentsContainer);
An example of Redux store at work using Redux DevTools when adding a comment:
type(pin):”ADD_COMMENT” ▶ payload(pin) id(pin):18 content(pin):”awesome” video_id(pin):52
Originally published at https://lkorchnoy.github.io on October 12, 2020.
