コンポーネントで 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))