Skip to content

Commit

Permalink
fixed typos
Browse files Browse the repository at this point in the history
  • Loading branch information
khayyamsaleem authored and Gretzky committed Jan 1, 2019
1 parent cf660b1 commit 4de036a
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 7 deletions.
10 changes: 5 additions & 5 deletions docs/general/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ Imagine that your application is fetching data in json format from a back-end. F
2. `API_SUCCESS`: Upon dispatching this, your application should show the data to the user.
3. `API_FAILURE`: Upon dispatching this, your application should show an error message to the user.

And this is only for **_one_** API call. In a real-world scenario, one page of your application could be making tens of API calls. How do we manage all of them effectively? This essentially boils down to controlling the flow of your application. What if there was a background process that handles multiple actions simultaneously, communicates with redux store and react containers at the same time? This is where redux-saga comes into the picture.
And this is only for **_one_** API call. In a real-world scenario, one page of your application could be making tens of API calls. How do we manage all of them effectively? This essentially boils down to controlling the flow of your application. What if there was a background process that handles multiple actions simultaneously, communicates with the Redux store and react containers at the same time? This is where redux-saga comes into the picture.

The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. `redux-saga` is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well.

Expand Down Expand Up @@ -184,11 +184,11 @@ Run `npm start` to launch the application. If you start browsing at [https://loc

- `mapDispatchToProps()`: Generally, we provide outgoing action creators (functions that create [action](http://redux.js.org/docs/basics/Actions.html) objects) to the react component through this method. Notice that for every keypress in textbox, your state will be updated by dispatching a `changeUsername` action to the store. So at any point in time, your Redux state will hold the currently typed username. When you submit the form, another action, `loadRepos` will be dispatched.

- `mapStateToProps()`: Generally, we provide incoming state from Redux store to the react component through this method. Notice that the we do not provide the entire state to the component, simply because we don't want the react component to have access to irrelevant data. The state will be filtered by selectors such as `selectRepos`, `selectUsername` etc.
- `mapStateToProps()`: Generally, we provide incoming state from the Redux store to the react component through this method. Notice that we do not provide the entire state to the component, simply because we don't want the react component to have access to irrelevant data. The state will be filtered by selectors such as `selectRepos`, `selectUsername`, etc.

Together these two methods work like magic. When you type something in the textbox the following things will happen in a sequential manner:

1. `changeUsername()` will send text to the Redux store. The text can be accessed using `evt.target.value`. Here, `evt` is the `onChange` event emmited by pressing a key.
1. `changeUsername()` will send text to the Redux store. The text can be accessed using `evt.target.value`. Here, `evt` is the `onChange` event emitted by pressing a key.
2. The Redux store will consult with its corresponding reducer, since a reducer knows what to do with the data.
3. When a reducer computes a new state tree, the store will update its state with the newly typed data.
4. An update has occured in the state, therefore `mapStateToProps()` will be triggered and your react component will get the new data.
Expand All @@ -205,8 +205,8 @@ Sagas are nothing but ES6 [generator functions](https://developer.mozilla.org/en
Check out [`HomePage/saga.js`](https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/HomePage/saga.js). It can be confusing for untrained eyes. The API of `redux-saga` is self-descriptive once you've seen it, so let's go over what happens in there:

- You can `fork` a saga to send it to the background. That way, your code will not get blocked even when the saga is continuously running.
- `takeLatest` is used for listening for a particular action. In this case, it will wait for a `LOAD_REPOS` action. Whenever you disptach this action, the saga will understand that you want to fetch repos from github's public API by calling `getRepos()`.
- If the API successfully returns some data, a `reposLoaded()` action will be dispatched which carries the data. When redux store receives this action, [a reducer](https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/App/reducer.js) will set incoming data in the new state tree.
- `takeLatest` is used for listening for a particular action. In this case, it will wait for a `LOAD_REPOS` action. Whenever you dispatch this action, the saga will understand that you want to fetch repos from github's public API by calling `getRepos()`.
- If the API successfully returns some data, a `reposLoaded()` action will be dispatched which carries the data. When the Redux store receives this action, [a reducer](https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/App/reducer.js) will set incoming data in the new state tree.

_An update has occurred!_ `mapStateToProps()` will be triggered. `<HomePage />` will receive the new data and rerender.

Expand Down
4 changes: 2 additions & 2 deletions docs/general/server-configs.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ This boilerplate includes an `app/.htaccess` file that does three things:

`.htaccess` can only provide security by redirecting HTTP to HTTPS

> Note: For a detailled security configuration in apache httpd, a `.conf` file is necessary. You can use [Mozillas TLS Configurator](https://mozilla.github.io/server-side-tls/ssl-config-generator/) to get some examples.
> Note: For a detailed security configuration in apache httpd, a `.conf` file is necessary. You can use [Mozilla's TLS Configurator](https://mozilla.github.io/server-side-tls/ssl-config-generator/) to get some examples.
## Nginx

An `app/.nginx.conf` file is included that does the same on an Nginx server.

### security

Additionally, the `.nginx.conf` provides TLS security configuration settings based on [Mozillas TLS Guidelines](https://wiki.mozilla.org/Security/Server_Side_TLS), including:
Additionally, the `.nginx.conf` provides TLS security configuration settings based on [Mozilla's TLS Guidelines](https://wiki.mozilla.org/Security/Server_Side_TLS), including:

- HSTS Header
- TLS 1.2 only
Expand Down

0 comments on commit 4de036a

Please sign in to comment.