To moje pierwsze podejście do Reduxa (od razu z Thunkiem, żeby zrobić coś sensownego) i właściwie pierwsze zacięcie. Właściwie uzyskuję przewidywany wynik, niemniej po drodze wyskakuje komunikat o błędzie i nie wiem co z tym zrobić. Przejdźmy do szczegółów.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ConnectedApp from './App';
import * as serviceWorker from './serviceWorker';
import './styles/App.css';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { reducer } from './reducer';
//import registerServiceWorker from './registerServiceWorker';
const store = createStore(reducer, applyMiddleware(thunk) );
ReactDOM.render(<Provider store={store}><ConnectedApp /></Provider>, document.getElementById('root'));
serviceWorker.unregister();
App.js
import React, {useEffect} from 'react';
import {getData} from './actions';
import {connect} from 'react-redux';
import './styles/App.css';
function App(props) {
useEffect(() => getData(), []);
console.log(props);
return (
<div className="App">
</div>
);
}
const mapStateToProps = (state) => {
return {state};
};
const mapDispatchToProps = getData;
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);
export default ConnectedApp;
dispatcher (fragment actions.js)
export function getData() {
console.log('getdata');
return dispatch => {
console.log('dispatch');
// set state to "loading"
dispatch(getDataRequested());
fetch("https://api.myjson.com/bins/8qjek")
.then(response => response.json())
.then(data => {
// set state for success
dispatch(getDataDone(data));
})
.catch(error => {
// set state for error
dispatch(getDataFailed(error));
})
}
}
Powyżej index.js i app.js apki, są jeszcze oczywiście akcje i reducer. A problem jest taki, że choć console.log w app.js pokazuje to czego sie spodziewam - czyli pokazuje, że najpierw jest loading a potem już nie ma loading ale są pobrane trzy rekordy - i to własciwe rekordy - to po drodze wyskakuje błąd:
mapDispatchToProps in connect(App) should return a plain object, instead received undefined.
i nie mam bladego pojęcia, dlaczego. Kod właściwie jest składanką kilku fragmentow z tutków sieciowych.