Redux商店在组件中变空

Question

在我的组件中获取redux存储时遇到问题。我正在使用redux-react async从api获取数据。我从jsonplaceholder api获取数据，但是我在配置商店和将商店与根组件连接时遇到问题。我可以看到商店中有数据使用记录器和redux开发工具扩展。

我在索引组件中做了console.log(store.getState())，商店是空的：clientData: {}。我不知道我错过了什么，我需要一些提示。

//动作创作者

export const datafeachsuccess = data => {
    return {
      type: FEACH_SUCCESS,
      data: data
    };
  } 

export const getClientData = () => {
    return (dispatch) => {
        return fetch('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                return res.json();
            }).then(json => {
                dispatch(datafeachsuccess(json))
            })
          }}

//客户端数据缩减器

const clientReducer =(state = {}, action)=>{
    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; 

// rootreducer

import { combineReducers } from 'redux';
import clientReducer from './clientreducer/clientreducer'

const rootReducer = combineReducers({
    clienetData: clientReducer
})

export default rootReducer; 

//配置商店

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)
    )
  );
} 

//索引组件

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 =(
    <Provider store={store}> 
        <Router history={history}>
            <App/>
        </Router>
    </Provider>
)

ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

//与组件连接

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 (
      <Grid container space={8} justify='center'> 

      </Grid> 
    );
  }
}

const mapStateToProps = state => {
  return {
   userData: state.clientData|| []
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getClientData: () => dispatch(getClientData())
  };
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(UserInfo))

Answer 1

你在打电话

console.log(store.getState())

在你从服务器fetch数据之前。 尝试先调用getClientData，然后调用回调日志store.getState()

Answer 2

当你打电话给console.log(store.getState())时你还没有打电话给api，所以没有帖子。一旦安装了UserInfo组件（即添加到页面的DOM），您似乎只调用api