Skip to content
Permalink
Browse files

docs(redux): revisions and grammar (#199)

* docs(redux): revisions and grammar

Minor sentence changes for formality and ease of reading/understanding
Changed ordered lists to unordered as no inherent structure is apparent 
Fix spelling and grammar

* fix indentation

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Yes, good catch!

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>

* Update development/redux.md

Co-Authored-By: ryanscovill <ryans797@gmail.com>
  • Loading branch information...
ryanscovill authored and ruxandrafed committed Feb 18, 2019
1 parent e6c3dad commit a6897ae4cf637850cf4a1097c3fce7ba0080bcec
Showing with 33 additions and 32 deletions.
  1. +33 −32 development/redux.md
@@ -2,29 +2,28 @@

## Why

While [React.js](react.md) gives us stateful components, we need another
[isomorphic](isomorphic.md) tool to manage state across our entire
single-page-applications. More specifically we need a
[Single Source of Truth](https://en.wikipedia.org/wiki/Single_source_of_truth).
Managing state in a declarative framework like React is critical, and easy to
While [React.js](react.md) provides stateful components, managing state across entire
single-page-applications requires an [isomorphic](isomorphic.md) tool.
More specifically, we need a [single source of truth](https://en.wikipedia.org/wiki/Single_source_of_truth).
Managing state in a declarative framework like React.js is critical and easy to
get wrong. How can we minimize side effects, while maximizing testability and
reproducibility? We separate data, logic, and rendering. How can we visualize
the changes we are pushing to our state?
[Uni-directional data flow](http://redux.js.org/docs/basics/DataFlow.html)
makes it easy to reason about the interractions between actors.
the changes we are pushing to our state? We use
[uni-directional data flow](http://redux.js.org/docs/basics/DataFlow.html)
to easily reason about the interactions between actors.

## What

[Redux](http://redux.js.org/) is a tiny (2kb) library used most commonly with
React single-page-applications, to manage its state. It has an excellent
[browser dev tool](https://github.com/gaearon/redux-devtools) that shows you
React.js single-page-applications to manage its state. It has an excellent
[browser dev tool](https://github.com/gaearon/redux-devtools) that shows
the actions you make, and the state mutations that are caused by them.

Redux uses a single source of truth, called "the store", which is an immutable
object tree. The only way to change the data is by emitting "actions", which
object tree. The only way to change the data is emitting "actions", which
describe what you want to do. These actions use "reducers" to perform the
mutations to the state. All of these concepts are rooted in functional
programming, and therefore highly unit testable.
mutations to the state. Since these concepts are rooted in functional
programming, the code is highly unit testable.

| Function | React With `react-redux` | Server |
| --------------------------------- | ------------------------ | ------------------- |
@@ -43,31 +42,33 @@ has a lot of information about how we use Redux.

### React Component

1. Responsible for Presentation and User Interractions.
2. It is blind to the complexities of the app (Doesn't know what happens after action is broadcasted).
3. React to state change via `connect`.
- Responsible for presentation and user interactions.
- Blind to the complexities of the app since it does not know what happens after the action is broadcasted.
- Able to react to state change via `connect`.

### Actions

1. Responsible for Communication between parts of redux
2. Use event descrption instead of function Invocation
3. Listeners are responsible to determine how to react to actions
- Responsible for communication between parts of redux
- Use event description instead of function invocation
- Listeners determine how to react to actions

### Reactive Style

1. Describe an event via Actions-
2. Actions describes a need as a fact or an event already happened without dictating how to fulfill the need.
3. Eg. Need => `TIME_TO_TRAVEL_ARRIVED`
- `personOneSaga` reacts by => `startWalking()`
- `personTwoSaga` reacts by => `callTaxi()`
- Describe an event via actions
- Actions describe a need as a fact or an event already happened, without dictating how to fulfill the need.

Eg. Need => ``TIME_TO_TRAVEL_ARRIVED``

- ``personOneSaga`` reacts by => ``startWalking()``
- ``personTwoSaga`` reacts by => ``callTaxi()``

### Store

1. Responsible for application state (immutability, persisting to disk, etc).
2. The [Single Source of Truth](https://en.wikipedia.org/wiki/Single_source_of_truth).
3. Keeper of state information, should not keep business logic.
4. Can only be affected by actions.
5. Prevent unintentional modifications by other methods via Object Reference, or Directly Accessing Store Members.
- Responsible for application state (immutability, persisting to disk, etc).
- The [Single Source of Truth](https://en.wikipedia.org/wiki/Single_source_of_truth).
- Keeper of state information, should not keep business logic.
- Can only be affected by actions.
- Prevents unintentional modifications by other methods via object reference, or directly accessing store members.

```ts
//Reducer
@@ -83,9 +84,9 @@ export const people = (state = [], action) => {

### The Saga Library

1. Responsible for Business Logic and Async actions (HTTP Calls).
2. Does not keep local state.
3. Typical use is take user input, make an HTTP call, and provide output to go into the store.
- Responsible for business logic and asynchronous actions (HTTP Calls).
- Does not keep local state.
- Typical use is take user input, make an HTTP call, and provide output to go into the store.

### Redux Dataflow

0 comments on commit a6897ae

Please sign in to comment.
You can’t perform that action at this time.