0

我在组件中获取 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))

在此处输入图像描述

4

2 回答 2

0

你在打电话

console.log(store.getState())

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

于 2018-07-15T12:15:51.500 回答
0

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

于 2018-07-15T12:19:15.537 回答