How to do asynchronous actions with React/Redux (este stack)

Question

I have successfully written some code that will go through the redux flow, after the click of a button it will display the information I want on the UI.

I am using the este stack.

This is my button:

const Buttons = ({ requestAsyncData}) => (
  <View>
    <Button onClick={requestAsyncData}>
      <FormattedMessage {...buttonsMessages.add100} />
    </Button>
  </View>
);

export default connect(state => ({}), { requestAsyncData })(Buttons);

Now here is where I define the action:

export const REQUEST_ASYNC_DATA = 'REQUEST_ASYNC_DATA';

export const requestAsyncData = () => {

  return {
    type: REQUEST_ASYNC_DATA,
    payload: [{
      name: "one one!",
      id: Math.random()
    },{
      name: "two two!",
      id: Math.random()
    }]
  }

Here is my reducer:

const State = Record({
  map: Map()
}, "names");

const asyncExampleReducer = (state = new State(), action) => {
  switch (action.type) {

    case actions.REQUEST_ASYNC_DATA: {
      const names = action.payload.reduce((names, json) =>
          names.set(json.id, new Name(json))
        , Map());
      return state.update('map', map => map.merge(names));
    }

    default:
      return state;

  }
};

export default asyncExampleReducer;

This works exactly as expected on the ui, updating with the correct information, from the action, I get actual payload to do as I please:

payload: [{
  name: "one one!",
  id: Math.random()
},{
  name: "two two!",
  id: Math.random()
}]

Now I'm trying to make this payload asynchronous, let's say I will get the information for that object from an ajax api call.

How should I go about it?

I'm not sure if I need to go with thunks or if I should do something like suggested here, I've been trying all sort of recommendations but I'm not sure if my problems are javascript concrete problems or understanding react.

For example I've tried to do an action similar to the one suggested by thunk but it doesn't recognize dispatch and it doesn't seem to delay it either...

function doIncrementAction() {
  return {
    type: REQUEST_ASYNC_DATA,
    payload: [{
      name: "trufa!",
      id: Math.random()
    },{
      name: "benja!",
      id: Math.random()
    }]
  }
}

export const requestAsyncData = () => {
  return dispatch => {
      setTimeout(() => {
        // Yay! Can invoke sync or async actions with `dispatch`
        dispatch(doIncrementAction());
      }, 1000);
    };
};

raven.js:290 Uncaught TypeError: Cannot read property 'payload' of undefined

raven.js:290 Uncaught TypeError: dispatch is not a function

How should I go about this? Thanks!!

Have you had a look at Sagas? They're a way of tying in API calls (and other async operations) to the Redux data flow. — christopher
– christopher, Commented Oct 2, 2016 at 19:55
They use some ES6 concepts so you'll need a transpiler, but I've found them to be an incredibly clean approach to doing asynchronous operations within a Redux framework. — christopher
– christopher, Commented Oct 2, 2016 at 19:57
Thunks are a good approach too. Sagas, sure, but thunks are good enough to handle any async ops with redux... did you forget to add the thunk middleware? — azium
– azium, Commented Oct 2, 2016 at 20:06
I just answered a similar question there with a jsfiddle sample using redux-thunk; stackoverflow.com/questions/39813984/… — cdagli
– cdagli, Commented Oct 2, 2016 at 20:13

paulwithap · Accepted Answer · 2016-10-03 21:00:55Z

0

The issue sounds like you haven't actually installed the redux-thunk middleware:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

After setting up your store like that, your example should work.

answered Oct 3, 2016 at 21:00

paulwithap

6781 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to do asynchronous actions with React/Redux (este stack)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related