Nsryjdtyk

First, sorry for my english :)

I'm learning React and Redux. I just want to know why I can't update the state of one container with redux. The only way to fix this probleme is to write a set Time out function (because JS is asynchronous).
But I'm sure, that there is a better way to code what I want to do. If someone could help me please.
My fetch is running without any probleme.

Container FormAmdmin.js

import React, {Component} from 'react';

import {Container, Row, Col} from 'react-bootstrap';

import TextField from '@material-ui/core/TextField';

import Button from '@material-ui/core/Button';

import {getFormAdmin} from '../Actions/PostFormAdmin';

import { bindActionCreators } from 'redux';

import { connect } from 'react-redux';

import './FormAdmin.css'





const MapDispatchToProps = dispatch => {

    return bindActionCreators({getFormAdmin}, dispatch)

}



const MapStateToProps = state => {

    return {Auth : state.Auth}

}



class FormAdmin extends Component {

    constructor(props) {

        super(props);

        this.state = {

            email: '',

            password: '',

            isSuccess: false,

            response : {}

        };



    this.handleChange = this.handleChange.bind(this)

    this.handleSubmit = this.handleSubmit.bind(this)

    }





    componentWillReceiveProps(nextProps){

        console.log(nextProps)

        let response = nextProps.Auth.response

        let isSuccess = nextProps.Auth.isSuccess

        this.setState({

            response,

            isSuccess

        })

        this.onNaviguateAdmin()

   }



    // there 's no change to the state of my component

       onNaviguateAdmin = () => {

       console.log(this.state)

    }



    // It's working thanks to a setTimeOut Fonction

    //    onNaviguateAdmin = () => {

    //     setTimeout(() => {

    //         console.log('succes', this.state)

    //     }, 1000)



    // }





    handleChange(e){

       this.setState({

           [e.target.name] : e.target.value

       })

    }



    handleSubmit(e){

        e.preventDefault(); 

        const body = {

            email : this.state.email,

            password : this.state.password

        }

       this.props.getFormAdmin(body)

     }



    render() {

    console.log('state render', this.state) // The state in the render is OK

     const { Auth } = this.props

     let divResult = <div></div>

       if (this.state.response.flash ==='ok') {

        divResult = <div>Connexion réussie</div>

       }

       else if (this.state.response.flash ==='Not a yet a Success') {

           divResult = <div>Identifiants ou mot de passe invalides</div>

       }



        return (

            <div className="ContainerFormAdmin">

                <Container fluid>

                    <h3>Administration du site</h3>

                    <Row>

                        <Col xs={12}>

                        <form onSubmit={this.handleSubmit}>

                        <h5>Connexion à l'Administration</h5>

                            <div>

                            <TextField 



                            name="email"

                            id="email"

                            label="email"

                            margin="normal"

                            onChange={this.handleChange}

                            />

                            </div>

                           <div>

                           <TextField 



                           name ="password"

                           id="password"

                           label="password"

                           margin="normal"

                           onChange={this.handleChange}

                           />

                           </div> 

                           <Button

                           type="submit"

                           >Connexion</Button>



                        </form>



                        </Col>

                    </Row>

                </Container>

                <div>{divResult}</div>



        </div>



        );

    }

}





export default connect(MapStateToProps, MapDispatchToProps)(FormAdmin);

I use MapDispatchToProps to get an action : the fetch. I would like to get the response in the state of my component. That's why I'm using "componentWillReceiveProps" to update my state. But It's not working.

AuthReducer.js

const initialState = {

    error: null,

    response: {},

    isSuccess: false

}



const FormAdmin = (state = initialState, action) => {

    console.log('je rentre dans auth reducers')

    switch (action.type) {

        case 'FORM_ADMIN_SUCCESS':

            if (action.payload.json.flash === 'ok') {

                return {

                    ...state,

                    response: action.payload.json,

                    isSuccess: true

                }

            } else if

                (action.payload.json.flash === 'Not a yet a Success'){

                    return {

                        ...state,

                        response: action.payload.json,

                        isSuccess: false

                    }

                }

        break   

        case 'FORM_ADMIN_ERROR':

            return {

                ...state,

                error: true,

                isSuccess: false

            }



        default:

            return state;

    }

}



export default FormAdmin

Action PostFormAdmin.js

export const postFormAdminSuccess = (json) => ({

    type : 'FORM_ADMIN_SUCCESS', 

    payload : {json}

})



export const postFormAdminError = (error) => ({

    type : 'FORM_ADMIN_ERROR', 

    payload : {error}

})







function handleError(response){



    if (!response.ok){

        throw Error(response.statusText)

    }

   return response

}





export function getFormAdmin(formAdmin){

   return(dispatch) => {

        return fetch('http://localhost:4000/admin', {

            method : 'POST', 

            headers: {

                'Accept': 'application/json',

                'Content-Type': 'application/json'

              },

            body : JSON.stringify(formAdmin)

        })

        .then(handleError)

        .then(res => res.json())

        .then(

            res => {

                dispatch(postFormAdminSuccess(res));

            },

            err => {

                dispatch(postFormAdminError(err)); 

                console.log('erreur de response', err)

            }

        )

    }

}

I'm using redux Thunk.

Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.min.css';

import { Provider } from 'react-redux'

import { createStore, applyMiddleware } from 'redux'

import allReducers from './Reducers/Index';

import reduxThunk from 'redux-thunk';





const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); 

const store = createStoreWithMiddleware(

    allReducers

)





ReactDOM.render(

    <Provider store={store}>

    <App />

    </Provider>, document.getElementById('root'));

I really appréciate if someone can help. I know it's working with a setTimeout fonction, but I'm sure that there is another way to do it.

Thank's for all !
hollowspy

Try to pass a callback to setState so that onNaviguateAdmin is called after actual change to state:

this.setState({

    response,

    isSuccess

}, this.onNaviguateAdmin)

Note that componentWillReceiveProps is deprecated and may be the cause of your problems. You should use componentDidUpdate instead:

componentDidUpdate(prevProps){

    console.log(prevProps, this.props)

    if (this.props.Auth !== prevProps.Auth) {

        let response = this.props.Auth.response

        let isSuccess = this.props.Auth.isSuccess

        this.setState({

            response,

            isSuccess

        }, this.onNaviguateAdmin)

    }

}