From df88af1c0c9e0a5936d81fa3cb324b7d99c261e6 Mon Sep 17 00:00:00 2001 From: Simon Rozsival Date: Thu, 2 Feb 2017 09:47:13 +0100 Subject: [PATCH] web-app implementation: the root reducer and the selectors --- Rewritten-docs.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/Rewritten-docs.md b/Rewritten-docs.md index 2a4d3d4..f4e937d 100644 --- a/Rewritten-docs.md +++ b/Rewritten-docs.md @@ -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 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 Middleware @@ -3513,7 +3522,19 @@ We created two other custom middleware functions for our needs: ##### 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