React Redux setState after action is dispatched

React Redux setState after action is dispatched

redux dispatch action from reducer
redux set state in action
redux update state from another reducer
redux dispatch callback
getderivedstatefromprops
redux update array of objects
setstate react
react setstate from props

This is my EditStudent component in React where I am using Redux for state management. This is my code of the component.

import React, { Component } from 'react'
import {connect} from 'react-redux';
import {getStudentDetail} from '../actions/studentActions';

class EditStudents extends Component {
    constructor(props){
        super(props);
        this.onInputChange = this.onInputChange.bind(this);
        this.state = {
            name:this.props.student.name,
            email:this.props.student.email,
            address:this.props.student.address
        }
        // this.state

    }

  render() {    
    return (
      <div>
      <form>
              <p>
                 <label>Name</label>
                 <input type="text" name="name" 
                 value={this.state.name} 
                 onChange={this.onInputChange}
                />
              </p>
              <p>
                 <label>Email</label>
                 <input type="text" name="email" 
                 value={this.state.email} 
                 onChange={this.onInputChange}
                 />
              </p>
              <p>
                 <label>Address</label>
                 <input type="text" name="address"
                  value={this.state.address} 
                  onChange={this.onInputChange}
                  />
              </p>
            <button type="submit">Update</button>
          </form>

      </div>
    )
  }
  onInputChange(e){
      var name = e.target.name;
    this.setState({[name]:e.target.value});

  }

  componentDidMount(){
      this.props.getStudentDetail(this.props.studentId());
  }
}

let mapDispatchToProps = (dispatch,ownProps)=>{
    return {
        getStudentDetail: (id)=>{
            dispatch(getStudentDetail(id));
        },
        studentId: ()=>{
            return ownProps.match.params.id;
        }

    }
}

const mapStateToProps = (state)=> {
    return {
        student:state.students.student
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(EditStudents);

Here I am having the problem displaying ajax response in text input field. I am setting component in the constructor but when ajax request completes state is not set.

Is it possible to set state after ajax completes?


I solve it by adding componentWillReceiveProps() function on component.

componentWillReceiveProps(nextProps){
    this.setState({
        name:nextProps.student.name,
        email:nextProps.student.email,
        address:nextProps.student.address
    })
  }

Thanks so much, Sakhi Mansoor for the help.

Actions and reducers: updating state · Human Redux, What you choose as the name of the action sent as the type property can be anything. Again, think of them as news stories: they don't tell you how to react, they inform We'll see how these reports are consumed later when we discuss reducers. we set `state = initialState` here. export default (state = initialState, action)  Actors are a sequence of functions which are called each time your store’s state changes, with one important exception: they aren’t called in response to actions dispatched from other actors. Each actor receives your store’s dispatch function and current state. The upshot of this is that if an actor dispatches an action,


you need to store input value in your state as you're re-rendering your input so changes are not getting reflected.

Do the folowing changes:

constructor(props){
    super(props);
    this.onInputChange = this.onInputChange.bind(this);
    this.state = {
        email:this.props.student.email,
        address: this.props.student.address
    }
}

In you render:

<p>
   <label>Email</label>
   <input type="text" name="email" value={this.state.email} onChange={this.onInputChange('name)}/>
</p>
<p>
   <label>Address</label>
   <input type="text" name="address" value={this.state.address} onChange={this.onInputChange('name')}/>
</p>


onInputChange= name => event => {
        this.setState({
          [name]: event.target.value,
         });
   };

React Redux setState after action is dispatched - reactjs - html, This is my EditStudent component in React where I am using Redux for state management. This is my code of the component. import React, { Component } from  The usual asynchronous action flow. Actions in Redux are objects and, as such, are dispatched synchronously. But thanks to various middleware, we can dispatch them in an asynchronous manner. There are many libraries that allow us to dispatch actions asynchronously — redux-thunk, redux-saga, and redux-observable, to name a few.


There are two ways

First -

  constructor(props) {
    super(props);
    this.state = {
      firstName: ""
    };
  }

  componentDidMount() {
    this.props.userProfile();     // Redux Action
  }

  componentWillReceiveProps(nextProps) {
    console.log(nextProps);
    this.setState({
      firstName: nextProps.user.firstName
    });
  }

Second -

  constructor(props) {
    super(props);
    this.props.userProfile();   // Redux Action
    this.state = {
      firstName: ""
    };
  }

  static getDerivedStateFromProps(props, state) {
    return {firstName: this.props.user.firstName };
  }

reduxjs/react-redux, In handleChange, it execute selectLayoutAction action, dispatch th. Get the latest props value from state after updating props with dispatch right away #402 setState({selectedLayoutOption: event.target.value}); // I need the  Redux vs React’s setState() Sometimes you can get into a situation when you’re choosing between Redux and React’s setState(). When I’m doing such choice, I often use the following rule of thumb. Imagine that your app can restore its state when you refresh the page.


Issue #1313 · reduxjs/react-redux, After changing react-redux version to 7.0.3 this issue dissapears. setState enqueues an update and dispatch updates the store. So a web request is kicked off, and a redux action is dispatched indicating the web request is  The dispatch() function can be accessed directly from the store as store.dispatch(), but more likely you'll access it using a helper like react-redux's connect(). You can use bindActionCreators() to automatically bind many action creators to a dispatch() function. Action creators can also be asynchronous and have side-effects.


Store, The only way to change the state inside it is to dispatch an action on it. This is similar to how there is just one root component in a React app, but it is In Redux, subscriptions are called after the root reducer has returned the new state,​  This question relates to any UI forced interaction that needs to happen after an action but can't be in render. Another example would be scrolling to an element to bottom after an action is dispatched.


Actors: How to dispatch actions after Redux state changes, Have you ever wanted to respond to a change in your Redux store's state by dispatching another action? Now you know that this is frowned on. (This is a spinoff from this thread.) It&#39;s sometimes useful to be able to dispatch an action from within an async function, wait for the action to transform the state, and then use the resultin