web-app implementation: the root reducer and the selectors

master
Simon Rozsival 8 years ago
parent 884b43e528
commit df88af1c0c

@ -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

Loading…
Cancel
Save