0

コンポーネントで redux ストアを取得する際に問題があります。APIからデータを取得するためにredux-react asyncを使用しています。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