Why do I get a 'Actions must be plain objects' error? - reactjs

Question

I am just learning react-redux and trying to fire a thunk, this is the thunk:
const getRepos = dispatch => {
try {
const url = `https://api.github.com/users/reduxjs/repos?sort=updated`;
fetch(url)
.then(response => response.json())
.then(json => {
console.log("thunk: getrepos data=", json);
});
} catch (error) {
console.error(error);
}
};
I hooked up my component to the store:
const bla = dispatch =>
bindActionCreators(
{
geklikt,
getRepos
},
dispatch
);
const Container = connect(
null,
bla
)(Dumb);
When I trigger the getRepos thunk I get:
Actions must be plain objects. Use custom middleware for async
actions.
What could be the issue? I included the middleware? link to code
sandbox

Answer 1

Please refactor your application structure, it's all in one file and extremely hard to read.
Things to consider:
Use a switch statement in your reducers
Separate components from containers: https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
Make sure to set initial reducer state: state={}, state=[] ...etc.
Simplify the action to either use .then().catch() or use async/await within a try/catch block.
In the meantime, here's a working version: https://codesandbox.io/s/oxwm5m1po5
actions/index.js
import { GEKLIKT } from "../types";
export const getRepos = () => dispatch =>
fetch(`https://api.github.com/users/reduxjs/repos?sort=updated`)
.then(res => res.json())
.then(data => dispatch({ type: GEKLIKT, payload: data }))
.catch(err => console.error(err.toString()));
/*
export const getRepos = () => async dispatch => {
try {
const res = await fetch(`https://api.github.com/users/reduxjs/repos?sort=updated`)
const data = await res.json();
dispatch({ type: GEKLIKT, payload: data }))
} catch (err) { console.error(err.toString())}
}
*/
components/App.js
import React from "react";
import Dumb from "../containers/Dumb";
export default () => (
<div className="App">
<Dumb />
</div>
);
containers/Dumb.js
import React from "react";
import { connect } from "react-redux";
import { getRepos } from "../actions";
let Dumb = ({ data, getRepos }) => (
<div>
hi there from Dumb
<button onClick={getRepos}>hier</button>
<pre>
<code>{JSON.stringify(data, null, 4)}</code>
</pre>
</div>
);
export default connect(
state => ({ data: state.data }),
{ getRepos }
)(Dumb);
reducers/index.js
import { combineReducers } from "redux";
import { GEKLIKT } from "../types";
const klikReducer = (state = {}, { payload, type }) => {
switch (type) {
case GEKLIKT:
return { ...state, data: payload };
default:
return state;
}
};
export default combineReducers({
data: klikReducer
});
root/index.js
import React from "react";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers";
import App from "../components/App";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default () => (
<Provider store={store}>
<App />
</Provider>
);
types/index.js
export const GEKLIKT = "GEKILKT";
index.js
import React from "react";
import { render } from "react-dom";
import App from "./root";
import "./index.css";
render(<App />, document.getElementById("root"));

Answer 2

You returned the promise in action. A promise is not a plain object and so the returned action would not be a plain object and hence the error.
Since you're using the thunk middleware your actions can be functions and here's how you'd do it.
const GET_REPOS_REQUEST = "GET_REPOS_REQUEST";
const GET_REPOS_SUCCESS = "GET_REPOS_SUCCESS";
const GET_REPOS_ERROR = "GET_REPOS_ERROR";
export function getRepos() {
return function action(dispatch) {
dispatch({type: GET_REPOS})
const url = `https://api.github.com/users/reduxjs/repos?sort=updated`;
const request = fetch(url);
return request.then(response => response.json())
.then(json => {
console.log("thunk: getrepos data=", json);
dispatch({type: GET_REPOS_SUCCESS, json});
})
.then(err => {
dispatch({type: GET_REPOS_ERROR, err});
console.log(“error”, err);
});
};
}
Arrow function way:
export getRepos = () =>{
return action = dispatch => {
dispatch({type: GET_REPOS})
const url = `https://api.github.com/users/reduxjs/repos?sort=updated`;
const request = fetch(url);
return request.then(response => response.json())
.then(json => {
console.log("thunk: getrepos data=", json);
dispatch({type: GET_REPOS_SUCCESS, json});
})
.then(err => {
console.log(“error”, err);
dispatch({type: GET_REPOS_ERROR, err});
});
};}