wix-incubator / react-dataflow-example

Experimenting with different dataflow approaches for a real life React app

React Dataflow Example

A real-life example of a React project with focus on dataflow management. The example explores and compares methodologies by implementing the same app in different branches:

• redux-thunk branch - Basic Redux (thunks)
  Walkthrough post: Redux Step by Step: A Simple and Robust Workflow for Real Life Apps

• redux-thunk-tests branch - Tests for basic Redux (thunks)
  Walkthrough post: Redux Testing Step by Step: A Simple Methodology for Testing Business Logic

Running locally

• npm install
• npm start
• Open http://localhost:3000 to view it in the browser.

Want to contribute your own flavor?

1. Implement the entire app and reach the same end result using your own methodology
2. Recommended: write a blog post explaining your methodology
3. Submit a pull request and we'll add it as an additional branch

What does the example app do?

On the first screen, it asks the user for 3 topics they’re interested in. We pull the list of topics from Reddit’s list of default front page subreddits. After the user makes a choice, it shows the list of posts from each of these 3 topics in a filterable list — all topics or just one of the 3. When the user clicks on a post in the list, the post content is shown.

License

MIT

react-dataflow-example's Issues

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

This happens with the redditService class mock. I'm not sure if the Jest API has changed but the official docs seem to indicate that this code is still functional.

FAIL src/store/topics/tests/actions.spec.js
● store/topics/actions › should fetch topics from server

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/topics/__tests__/actions.spec.js:16:96)
  at process._tickCallback (internal/process/next_tick.js:68:7)

● store/topics/actions › should fetch topics and print to console on error

TypeError: Cannot read property 'mockImplementationOnce' of undefined

  at Object.it (src/store/topics/__tests__/actions.spec.js:27:96)
  at process._tickCallback (internal/process/next_tick.js:68:7)

FAIL src/store/tests/posts.spec.js
● store/posts integration › should fetch posts and filter

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/__tests__/posts.spec.js:26:96)
  at process._tickCallback (internal/process/next_tick.js:68:7)

● store/posts integration › should select post

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/__tests__/posts.spec.js:62:97)
  at process._tickCallback (internal/process/next_tick.js:68:7)

FAIL src/store/tests/topics.spec.js
● store/topics integration › should fetch topics

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/__tests__/topics.spec.js:26:96)
  at process._tickCallback (internal/process/next_tick.js:68:7)

● store/topics integration › should select topics one by one until valid

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/__tests__/topics.spec.js:42:96)
  at process._tickCallback (internal/process/next_tick.js:68:7)

FAIL src/store/posts/tests/actions.spec.js
● store/posts/actions › should fetch posts when one selected topic

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/posts/__tests__/actions.spec.js:20:97)
  at process._tickCallback (internal/process/next_tick.js:68:7)

● store/posts/actions › should fetch posts from multiple selected topics

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/posts/__tests__/actions.spec.js:30:97)
  at process._tickCallback (internal/process/next_tick.js:68:7)

● store/posts/actions › should fetch posts and print to console on error

TypeError: Cannot read property 'mockReturnValueOnce' of undefined

  at Object.it (src/store/posts/__tests__/actions.spec.js:41:97)
  at process._tickCallback (internal/process/next_tick.js:68:7)

PASS src/store/posts/tests/selectors.spec.js
PASS src/store/topics/tests/selectors.spec.js
PASS src/store/topics/tests/reducer.spec.js
PASS src/store/posts/tests/reducer.spec.js
PASS src/services/tests/reddit.spec.js

Test Suites: 4 failed, 5 passed, 9 total
Tests: 9 failed, 33 passed, 42 total
Snapshots: 0 total
Time: 0.832s, estimated 1s
Ran all test suites.