Starting a new application means drawing out a blueprint of what you want it to look like, and thinking about how you are going to implement whatever you are going to do before you even write any code. As a JavaScript developer, I often find myself questioning whether or not I’ll need to use Redux.

Redux is a state management technology created by the React team. It cleans up your application’s state massively by creating a global “store” where all state and state changes can be held, regardless of which file or page you’re in. Redux also helps developers steer clear of prop drilling, as parent components no longer need to directly pass downstate to their children, grandchildren, great-grandchildren, etc. via props. Let’s take a look at what this means through a create-user instance.

First, we’ll need a sign-up form in order for our user to create an account.

// src/Components/SignupForm.js //

import {createUser} from '../Actions/userActions.js'
import React from 'react'
import {connect} from 'react-redux'
class SignupForm extends React.Component{

   state = {
     username: '',
     password: '',
   }
   handleChange = e => {
     this.setState({
       [e.target.name]: e.target.value
     })    
   }        
   handleSubmit = e => {
     e.preventDefault()
     this.props.createUser(this.state)
   }
   render(){
      return(
          <form onSubmit={this.handleSubmit}>
            <input type="text" name="username"
             placeholder="Username"
             value={this.state.username} 
             onChange={this.handleChange}/>
            <input type="password" name="password" 
             placeholder="Enter Password" 
             value={this.state.password}
             onChange={this.handleChange}/>
            <input type="submit" value="Signup"/>}
          </form>
        )
    }
}
export default connect(null, createUser)(SignupForm)

#redux-thunk #reactjs #javascript #redux #asynchronous