title: React-Redux re-rendering after state changed
body: <p>I'm trying to understand React+Redux. So, now I'm trying to fetch data from API, and faced with popular problem: when I change Redux state, it does not refresh my container component.
  <br>I read several questions here, most common problems are mutating state, and incorrect <code>connect</code> usage. I checked my code, everything looks fine. I suppose, that problem is in Reqct hook <code>useState</code>, in which I call my action generator. <br>Code:
  <br><b>Action generator</b></p>
  
  <pre><code>export const requestAccounts = () =&gt; ({
    type: 'REQUEST_ACCOUNTS'
  });
  
  export const receivedAccounts = (data) =&gt; ({
    type: 'RECEIVED_ACCOUNTS',
    data
  });
  
  export const requestAccountsError = (errText) =&gt; ({
    type: 'RECEIVED_ACCOUNTS_ERROR',
    errText
  });
  
  export function getAccounts(clientRef = 1) {
  
    return async function (dispatch) {
      async function fetchData() {
        let res;
        try {
          res = await fetch("https://wstest.grant.ua/stubs/accnts.json", { //добавить парамтер "номер клиента"
              method: 'GET' // *GET, POST, PUT, DELETE, etc.
          });
          if (res.ok) {
            let resJson = await res.json();
            dispatch(receivedAccounts(resJson.acn_list));
          }
          else {
            dispatch(requestAccountsError('Error during accounts request! Status '+res.status));
          }
  
        }
        catch (err) {
          dispatch(requestAccountsError(err.message));
        };   
      }
      dispatch(requestAccounts());
      await fetchData();
      /*I supposed that my problem depends on async loading, 
        so I tried to comment all above code and uncomment row below - also, 
        React did not re-render my component...*/
      //dispatch(requestAccountsError("ERROR_MESSAGEEEE"));
    }
  }
  </code></pre>
  
  <p><b>Reducer</b></p>
  
  <pre><code>
  const initialState = {
      isFetching : false,
      isError : false,
      errorText : "",
      accounts : []
  }
  
  export function acnList(state = initialState, action) {
      switch (action.type) {
        case "RECEIVED_ACCOUNTS":
          return Object.assign({}, state, {
              isFetching: false, 
              isError: false, 
              errorText: "", 
              accounts: action.acnList
            })
  /*I tried to write return { errorText: "123" } - also no re-render.. So, problem is not in 
  mutating previous state*/
        case "RECEIVED_ACCOUNTS_ERROR":          
          return Object.assign({}, state, {
              isFetching: false, 
              isError: true,
              errorText: "ERRTEXTTTT",
              accounts: []
          })
        case "REQUEST_ACCOUNTS":
          return Object.assign({}, state, {
              isFetching: true, 
              isError: false,
              errorText: "",
              accounts: []
          })
        default:
          return state
      }
  }
  </code></pre>
  
  <p><b>Container component</b></p>
  
  <pre><code>import { connect } from 'react-redux'
  import AcnListComponent from '../../MainMenuComponents/AcnListComponent'
  import {getAccounts} from '../actions/actions'
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      acnList: state.acnList.accounts,
      isError: state.acnList.isError,
      isFetching: state.acnList.isFetching,
      errorText : state.acnList.errorText
    }
  }
  
  const mapDispatchToProps = (dispatch, ownProps) =&gt; {
    return {
      getAccounts: () =&gt; {
        dispatch(getAccounts())
      }
    }
  }
  
  const AcnListContainer = connect(
    mapStateToProps,
    mapDispatchToProps
  )(AcnListComponent)
  
  export default AcnListContainer
  </code></pre>
  
  <p>And finally, part of my React-component code.
  <br></p>
  
  <pre><code>//imports
  
  function AcnListComponent(props) {
  
    /*here I can see that props are changed sucessfully (according to state). But no re-render!*/
    console.log(props);
    const {t} = props;
  
    const [isLoading, setIsLoading] = useState(props.isFetching);
    const [accounts, setAccounts] = useState(props.acnList);
    const [emptyMessage, setEmptyMessage] = useState(props.errorText);
    const [isError, setIsError] = useState(props.isError);
  
    useEffect(() =&gt; {
      if ((accounts.length === 0) &amp;&amp; !isError) {
          props.getAccounts();
      }
    }, []); //I need to call this effect only once, when component renders
  //renders
  </code></pre>
  
  <p>Looks really strange, like magic) <br>Maybe, I do something wrong with <code>useEffect</code>, not with Redux? I need to make this request when my component renders, and re-render it with received data.</p>