Uncaught exception dispatching fetch request

[pbraswell]

Hi, I'm sorry to trouble you with this issue, but I've tried everything that I know of to fix it on my own.

I've tried to follow your example code as accurately as possible. I've determined that my remote API call is getting called but I can't get any data to load into the redux store and I'm getting an exception when I call dispatch(events.fetch) in my componentWillMount() callback. The "events" object has the right signature, fetch, isLoading, needsFetch so it looks like your framework is getting injected properly. On thing that doesn't look right is that "isLoading" is true after the call and after I get the following exception. What could I be doing wrong?:

_uncaught at apiGeneric TypeError: payload.map is not a function at collectionReducer (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:79672:26) at https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:79708:17 at updateInDeepMap (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:72040:23) at updateInDeepMap (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:72049:24) at List.Map.updateIn (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:71347:27) at List.Map.update (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:71339:15) at collectionsReducer (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:79707:21) at https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:79802:17 at updateInDeepMap (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:72040:23) at updateInDeepMap (https://lightswitch-dashboard-v2-peterbraswell.c9users.io/static/js/bundle.js:72049:24)

[devvmh]

Hey, I can try to help diagnose this. It's going to be hard without more code though

Based on the error, it looks like the payload isn't correct here https://github.com/devvmh/redux-crud-store/blob/master/src/reducers.js#L117

Can you do either/both of these:

1. post the code that's failing
2. post the output of console.log(payload) if you break just before the error

[pbraswell]

Wow! Thank you so much for your help. I know this is getting into the realm of debugging my code, so I just wanted to say thank you. This process has actually taught me something about debugging React/JS. So payload is equal to what's coming back from the server. I suspect that I need to return something different. Here's what comes back:

console.log(payload); VM2528:1 Object {title: "Canned Scale Event From the Server", start: "Thu Apr 27 2017 11:07:11 GMT-0400 (EDT)"} start : "Thu Apr 27 2017 11:07:11 GMT-0400 (EDT)" title : "Canned Scale Event From the Server" proto : Object

I'm wondering if this might help. This is the mock endpoint that I'm testing against that shows the type of JSON that I"m returning:

http://demo3999660.mockable.io/dyno_events/1

TIA, Peter

[devvmh]

Ahhh of course, I see.

FETCH actions expect a response like

{
  events: [
    { ... },
    { ... }
   ]
}

FETCH_ONE is probably what you want. That means changing the code in mapStateToProps to use a different action creator.

Let me know if this helps. I think it should. If it does, I'd still like to leave this issue open so I can add a more helpful error message in this case.

[pbraswell]

Hey! Again, thanks for helping me stumble through this. So I updated the end point to return something that looks like what FETCH is expecting, at least I think I did. I'm still seeing exception on the same line of code. Again, here's the endpoint:

http://demo3999660.mockable.io/dyno_events/1

Many thanks, Peter

[devvmh]

I'm struggling to understand the purpose of the code. That endpoint looks like it should return a single event. If you read through the README of this repo, you'll see two examples. One is for FETCH actions, which fetch multiple records from the server. One is for FETCH_ONE actions, which fetch a single record from the server. I don't think you should modify the endpoint, I think you should modify your code that calls this lib to use FETCH_ONE instead of FETCH.

We're talking about the difference between these two action creators:

export function fetchPosts(params = {}) {
  return fetchCollection(MODEL, PATH, params)
}

export function fetchPost(id, params = {}) {
  return fetchRecord(MODEL, id, `${PATH}/${id}`, params)
}

The area of the README I'm referring to is the code block below the text

Fetching a single record is very similar. A typical component for editing a single record might implement these functions:

Again, I'll really struggle to help you more than this unless I can see your client side code.

[pbraswell]

I can understand the confusion and I apologize, I know given the nature of the endpoint it seems like it should return a single entity. In reality, that endpoint is a mock and will just return any JSON you give it. I'm just using it for testing/development purposes.

I figured out what was wrong. It's a simple/dumb mistake. I was returning a { [{...},{...}] } which was being interpreted on the client side as an Object with an embedded array. As such, the object doesn't have a .map method. I simply removed the outer curly braces and now it is correctly being interpreted as an Array that of course has a .map function.

Thank you for your patience on this.

Peter

[devvmh]

Beautiful. I"m glad this worked out for you.

When I get a chance I'll add that helpful logging and I'll close this issue then.

Thanks for reporting + using the library! Please send as much feedback as you can - the whole purpose of this package is so multiple developers don't have to waste time writing the same repetitive code over and over again