view raw
Jose Jose - 7 months ago 64
React JSX Question

Actions must be plain Objects in React/Redux?

the problem I'm running into is

Actions must be plain objects
when passing data through my action creators. Basically I'm trying to capture user input through the click of a button, and based on what button (view) is clicked the
is passed to the action creator
which then performs a GET request via axios and dispatches based on what view was selected.

I'm still new with Redux, though, and I'm unsure of what I'm doing wrong here. I've seen an async action performed inside an action creator before...

Component connected with Redux:

class ViewSelector extends Component {
selectView(event) {

render() {
return (
<button onClick={this.selectView.bind(this)}>VIEW ALL</button>
<button onClick={this.selectView.bind(this)}>VIEW LAST WEEK</button>
<button onClick={this.selectView.bind(this)}>VIEW LAST MONTH</button>

function mapStateToProps(state) {
return {
view: state.view

export default connect(mapStateToProps, actions)(ViewSelector);

Action creator for dispatching based on

export function fetchDataAsync(view) {
return dispatch => {

.then(res => {
if (view == 'VIEW LAST WEEK') {
} else if (view == 'VIEW LAST MONTH') {
}).catch(err => {


Any advice is appreciated. Or if you believe there's a more effective way of capturing that user input and passing it to an action creator...I'd be curious to hear more!


You need to install redux-thunk to use async action. And then create your store like this

import thunk from 'redux-thunk';
const store = createStore(YOURREDUCER, applyMiddleware(thunk));