|
|
@ -3486,6 +3486,15 @@ and it creates a new state. This process is very easy to reason about and is
|
|
|
|
also very easy to test using unit tests. Please read the [redux
|
|
|
|
also very easy to test using unit tests. Please read the [redux
|
|
|
|
documentation](http://redux.js.org/) for detailed information about the library.
|
|
|
|
documentation](http://redux.js.org/) for detailed information about the library.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The main difference between *Flux* and *redux* is the fact that there is only
|
|
|
|
|
|
|
|
one store with one reducer in redux. The single reducer might be composed from
|
|
|
|
|
|
|
|
several silmple reducers which might be composed from other simple reducers as
|
|
|
|
|
|
|
|
well, therefore the single reducer of the store is often refered to as the root
|
|
|
|
|
|
|
|
reducer. Each of the simple reducers receives all the dispatched actions and it
|
|
|
|
|
|
|
|
decide which actions it will process and which it will ignore based on the
|
|
|
|
|
|
|
|
*type* of the action. The simple reducers can change only a specific subtree of
|
|
|
|
|
|
|
|
the whole state tree and these subtrees do not overlap.
|
|
|
|
|
|
|
|
|
|
|
|
![Redux state handling schema](https://github.com/ReCodEx/wiki/raw/master/images/redux.png)
|
|
|
|
![Redux state handling schema](https://github.com/ReCodEx/wiki/raw/master/images/redux.png)
|
|
|
|
|
|
|
|
|
|
|
|
##### Redux Middleware
|
|
|
|
##### Redux Middleware
|
|
|
@ -3513,7 +3522,19 @@ We created two other custom middleware functions for our needs:
|
|
|
|
|
|
|
|
|
|
|
|
##### Accessing The Store Using Selectors
|
|
|
|
##### Accessing The Store Using Selectors
|
|
|
|
|
|
|
|
|
|
|
|
@todo
|
|
|
|
The components of the application are connected to the redux store using a
|
|
|
|
|
|
|
|
higher order function `connect` from the *react-redux* binding library. This
|
|
|
|
|
|
|
|
connection ensures that the react components will re-render every time some of
|
|
|
|
|
|
|
|
the specified subtrees of the main state changes.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The specific subtrees of interest are defined for every connection. These
|
|
|
|
|
|
|
|
definitions called *selectors* and they are are simple pure functions which take
|
|
|
|
|
|
|
|
the state and return its subtree. To avoid unnecesary re-renders and selections
|
|
|
|
|
|
|
|
a small library called [reselect](https://github.com/reactjs/reselect) is used.
|
|
|
|
|
|
|
|
This library allows us to compose the selectors in a similar way the reducers
|
|
|
|
|
|
|
|
are composed and therefore simply reflect the structure of the whole state
|
|
|
|
|
|
|
|
tree. The selectors for each reducer are stored in a separate file in the
|
|
|
|
|
|
|
|
`src/redux/selectors` directory.
|
|
|
|
|
|
|
|
|
|
|
|
#### Routing
|
|
|
|
#### Routing
|
|
|
|
|
|
|
|
|
|
|
|