title: set react state after props get the value from redux state(which is axios request in action and ReduxPromise in Midleware)
body: <p>I have component that gets props from the redux state with connect function. However my Redux state is a ReduxPromise when this component starts so if I assign this.state = {books: this.props.books} in the constructor I obviously get an error.
  I tried </p>
  
  <pre><code>componentWillUpdate(nextProps, nextState){
     this.setState({books: nextProps.books});
  } 
  </code></pre>
  
  <p>but in this case I get "Uncaught (in promise) RangeError: Maximum call stack size exceeded", my browser freeze for like 2-3 seconds and only then books displayed. 
  Is there way I can assign props to the react state(I need it to manipulate with the filters and pass it to child components) directly after the promise was resolved and this.props.books has real values?</p>
  
  <p>Action:</p>
  
  <pre><code>//get all books from server
  export function getBooksData() {
  
      const request = axios.get(`${ROOT_URL}/db/`);
  
      return{
          type: GET_BOOKS,
          payload: request
      }
  }
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>const INITIAL_STATE = { all: [] };
  
  export default function(state = INITIAL_STATE, action){
  
      switch (action.type){
  
          case GET_BOOKS:         
              return {...state, all: action.payload.data}; 
      }
  
      return state;
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>class BooksIndex extends Component{
  
      constructor(props){
          super(props);
  
          /* getting list of books with the action creator */
          this.props.getBooksData();
  
          this.state = {books: this.props.books};
  
  
          //if filters change state parent component should update the RenderBooks props
          //filter state, needed to update component on filter update
          var handleToUpdate  = this.handleToUpdate.bind(this);
          this.state = {filterSwitcher: true};
      }
  
      componentWillUpdate(nextProps, nextState){          
          this.setState({books: nextProps.books});
      } 
  
      handleToUpdate(someArg){
          this.setState({filterSwitcher: someArg});
          this.setState({books: this.props.books});
          console.log(this.props.books);
      }
  
  
  
      render(){       
  
          return(
              &lt;div className="row"&gt;
  
                  {/* sortig component */}
                  &lt;SortFilters handleToUpdate = {this.handleToUpdate.bind(this)}&gt;&lt;/SortFilters&gt;
  
                  { this.state.books == undefined ? &lt;Preloader /&gt; : &lt;RenderBooks books={this.state.books} /&gt;}
  
              &lt;/div&gt;          
          )
      }
  }
  
  function mapStateToProps(state){
  
      return {
          books: state.books.all.books
      }
  
  }
  
  export default connect(mapStateToProps, {getBooksData})(BooksIndex);
  </code></pre>