Add Redux/Thunk with bare minimum setup

[phoenisx]

• I have read Chapter's contributing guidelines.
• My pull request has a descriptive title (not a vague title like Update README.md).
• My pull request targets the master branch of Chapter.

Details on PR

Closes #145

This PR adds a bare minimum setup for redux/thunk for Chapter app. Fetch calls made is the PR is just for demo purpose and will be replaced with proper modals, once either a mock server is integrated or the api server is merged to the repo.

• Separates fetch proxy lib, in server/browser, with different packages(which are actively maintained).
• Using Redux Hooks for store state and dispatching actions from the component itself.

TODO:

• Add redux-persist for data persistence.
  • The only issue is SSR support from redux-persist, Problem with SSR on v5 rt2zz/redux-persist#457
• Add SSR support to cache and re-hydrate redux state in react app
• Typescript integration with Redux is still very hacky, any suggestions or later RFCs might resolve them.

Some changes:

• I have added modules folder to keep page related layout components in them, all the UI specific generic components are put in components dir.
• Also, I have kept Http Service in a separate layer, so that if needed, we can replace it to whatever API service we want to use. Specific http services (eg, Chapter Service) should be derived or be composed of HttpService.

PS: Also, this is my first ever biggest PR for a community project, if there are improvements needed to be done in the PR, please let me know, I would be happy to improve myself.

[Zeko369]

Also, a general question. Since we said that we're going to be using hooks in this project, wouldn't it be better to use useSelector or useDispatch instead of HOC with mapState/DispatchToProps
https://react-redux.js.org/next/api/hooks

[phoenisx]

@Zeko369 Using hooks in react needs to be done carefully, and I am no master of it yet. I have come across various tweets/articles mentioning bottlenecks of hooks (which can be resolved, obviously, but with extra care). Check this repo - https://github.com/ryardley/hooks-perf-issues

I am not against of using hooks, but I would prefer using PureComponent with redux for page modules and functional components (with hooks, if needed) for UI components.

[Zeko369]

@Shub1427 I think that we should discuss hooks/React.PureComponents/React.Component on the team meeting. @QuincyLarson Could you add this to the agenda?

[QuincyLarson]

A couple notes: on #123 we resolved to primarily use hooks. We've also agreed to use Thunk.

[allella]

Meeting Notes with more on the decision to use hooks.
https://github.com/freeCodeCamp/chapter/wiki/Meeting-Notes-November-15,-2019

[phoenisx]

Thanks all. Will update my PR accordingly.

To keep this in context, this PR is just a setup and does not include, data persistence, neither will it include any SSR support(I was having trouble setting it up with nextjs, but will figure it out). Will open a separate PRs supporting each/both of them.

[Zeko369]

I haven't commented on the data fetching since the API for this will be done in a few days so we can work with that, but I had some questions about immer and why not just use overrides on an object

[Zeko369]

The last thing was a comment by accident

[Zeko369]

Just a few little changes, also I didn't write it down since I still haven't finished the style guide, but could you add a new line between types of import (npm libs, external modules we creates, local modules)

[Zeko369]

@Shub1427 In the review I criticized your code, here I'm going to say that this PR is awesome 🚀 I really like the setup and cant wait to start working with it. 🤓
PS. you still need to fix things from the review 😜

[phoenisx]

Just a few little changes, also I didn't write it down since I still haven't finished the style guide, but could you add a new line between types of import (npm libs, external modules we creates, local modules)

Are you working on some Contributing Guidlines on Coding? GREAT!!
Even I was thinking to do so after this PR. But if you are doing it, thanks.
Please open an issue regarding that so everybody can also contribute their thoughts.

@Shub1427 In the review I criticized your code, here I'm going to say that this PR is awesome rocket I really like the setup and cant wait to start working with it. 🤓

I never took them as criticism, but a carefully done assesment, helping me out to do better.
Thanks for that @Zeko369.

PS. you still need to fix things from the review 😜

Well I was thinking to skip that and live my life happily ever after. 😜 😆

[Zeko369]

A general question and pls fix conflicts on package.json