# React Boilerplate

###### tags: `Document` `Boilerplate` `React` `Redux` `Redux-objervables` `Plando`

:::info
:bulb: **Base project:** We have take this repo has our base project *[react-boilerplate](https://github.com/react-boilerplate/react-boilerplate)*.
:::

## Considerations
We choosed one base project with a greate suport form community and also with a good arquitetural decisions.

Some key feature from this version:

- Quick scaffolding
- Instant feedback
- Predictable state management
- Next generation JavaScript
- Next generation CSS
- Industry-standard routing
- Industry-standard i18n internationalization support
- Offline-first
- Static code analysis
- SEO
- best test setup
- Native web app
- fastest fonts
- Stay fast
- Catch problems: AppVeyor and TravisCI


[more about those decisions](https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/introduction.md)

But even having this bunch of good decitions, we have take this as starter point and build upon.

### Our changes

#### Substitution of redux-saga for redux-observables

#### folder structure

#### `app/` folder to `src/`

`app/` is not a bad name, but its position is on top of the tree, and this is a bad thing for DX, Development eXperience. With `src/` it became the bottom folder of tree.

This is important because it is in this folder that the frontend development will live.

| src on bottom | app on top |
| -------- | -------- |
|  |  |

#### `containers/` folder to `views/`

`containers/` is a redux/react related name, not a app specific one. `views/` tells us more about it and do not have a framework lockin.

#### redux related stufs to `store/`
On original project redux stuffs was all over the place. We took it and put on one folder.


#### views as it own app with a hole pack of folders of source
Each view on the original project are one self contained app. With it on translations, actions, reducers, etc. But on original it was all creamed in the view folder. So we took it and put on each respective folder inside of its view.


### Tools
//

### redux
Most of tools will be based on redux. But some are a trick one, like injectors that even when use the hooks api together with redux store.

### redux-observables

#### [immer](https://immerjs.github.io/immer/docs/introduction)

Immer is a good way to go to ensure immutable state tree. I'm bit concerned about the use of switch case. It is a thing that will try to change on implementation.

Diagram:

Implementation:

import produce from "immer"

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
})

Kinda of fell strange change the `draft` arg, but looks like the inner work is doing in a safe way. And is really a more clean look.

// Redux reducer
// Shortened, based on: https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/products.js
const byId = (state, action) => {
    switch (action.type) {
        case RECEIVE_PRODUCTS:
            return {
                ...state,
                ...action.products.reduce((obj, product) => {
                    obj[product.id] = product
                    return obj
                }, {})
            }
        default:
            return state
    }
}

import produce from "immer"

const byId = produce((draft, action) => {
    switch (action.type) {
        case RECEIVE_PRODUCTS:
            action.products.forEach(product => {
                draft[product.id] = product
            })
    }
})

Is the above `switch` thats bother me.

### [reselect](https://github.com/reduxjs/reselect)
Before look into reselect, is better take a look in the selectors it self.
- [about selectors](https://daveceddia.com/redux-selectors/)

Then, the below video explain the problem that reselect is
<iframe width="560" height="315" src="https://www.youtube.com/embed/6Xwo5mVxDqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The point about reselect is to have a better performance on render of components.

### Our version

## Others important links
- [deploy in elastic beanstalk](https://github.com/react-boilerplate/react-boilerplate/issues/2566)
- [deployment documentation](https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/deployment.md)

### tests for epics
- [unit testing redux-observables](https://codeburst.io/unit-testing-redux-observable-based-epics-using-sinon-and-jest-c2003c2dc6fa)
- [writing tests for redux-observable](https://dev.to/julioolvr/writing-tests-for-redux-observable)