title: Redux store get empty in component
body: <p>I have a problem with getting the redux store in my component. I am using redux-react async to fetch data from api. I got the data from jsonplaceholder api, however I have a problem configuring the store and connecting the store with the root component. I can see there is data in the store using a logger and the redux developments tools extension. </p>
  
  <p>I did  <code>console.log(store.getState())</code> in the index component and the store is empty: <code>clientData: {}</code>. I have no idea what I have missed, I need some tips.</p>
  
  <p>//action creator</p>
  
  <pre><code>export const datafeachsuccess = data =&gt; {
      return {
        type: FEACH_SUCCESS,
        data: data
      };
    } 
  
  export const getClientData = () =&gt; {
      return (dispatch) =&gt; {
          return fetch('https://jsonplaceholder.typicode.com/posts')
              .then(res =&gt; {
                  return res.json();
              }).then(json =&gt; {
                  dispatch(datafeachsuccess(json))
              })
            }}
  </code></pre>
  
  <p>// client data reducer </p>
  
  <pre><code>const clientReducer =(state = {}, action)=&gt;{
      switch (action.type) {
        case FEACH_DATA:
          return {
            ...state,
            requestData: 'requesting Data'
          };
        case FEACH_SUCCESS:
          return {
            ...state,
            client: action.data
          };
        case FEACH_FAILD:
          return {
            ...state,
            error: action.data
          }
        default:
          return state;
      }
    }
  export default  clientReducer; 
  </code></pre>
  
  <p>//rootreducer </p>
  
  <pre><code>import { combineReducers } from 'redux';
  import clientReducer from './clientreducer/clientreducer'
  
  const rootReducer = combineReducers({
      clienetData: clientReducer
  })
  
  export default rootReducer; 
  </code></pre>
  
  <p>//configuring store </p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import rootReducer from './../reducer/rootReducer'
  import thunkMiddelware from 'redux-thunk';
  import { composeWithDevTools } from 'redux-devtools-extension';
  import { createLogger } from 'redux-logger'
  
  const loggerMiddleware = createLogger()
  
  export default function configureStore() {
     return createStore(
      rootReducer,
      composeWithDevTools(
        applyMiddleware(thunkMiddelware, loggerMiddleware)
      )
    );
  } 
  </code></pre>
  
  <p>//index component </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import createHistory from 'history/createBrowserHistory'
  import { Provider } from 'react-redux';
  import {Router} from 'react-router-dom';
  import configureStore from './redux/store/configureStore'
  
  
  const history = createHistory(); 
  const store = configureStore(); 
  console.log(store.getState())
  
  const app =(
      &lt;Provider store={store}&gt; 
          &lt;Router history={history}&gt;
              &lt;App/&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;
  )
  
  ReactDOM.render(app, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>//connecting with component</p>
  
  <pre><code>import React, { Component } from 'react';
  import Grid from '@material-ui/core/Grid';
  import {Link} from 'react-router-dom'
  import { connect } from 'react-redux';
  import { withRouter } from 'react-router'
  import {getClientData} from './../../redux/actions/feachclientData/requestData'
  import './css/user.css'
  
  
  class UserInfo extends Component {
    constructor(props){
      super(props)
      this.state = {
      }
    }
  
    componentDidMount(){
      this.props.getClientData(); 
  
    }
    render() {
      if(this.props.userData === 0) return null; 
      return (
        &lt;Grid container space={8} justify='center'&gt; 
  
        &lt;/Grid&gt; 
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
     userData: state.clientData|| []
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      getClientData: () =&gt; dispatch(getClientData())
    };
  };
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(UserInfo))
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/BGJuy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGJuy.png" alt="enter image description here"></a></p>