mapStateToProps - how it accesses the states from store

Author: rohan-paul

Redux/mapStateToProps-basic-understanding-2.md

@@ -31,8 +31,8 @@ ShoppingList.PropTypes = {
 };
 ```
 
-what mapStateToProps() does is, it allows us to take our item state (from itemReducer.js ) and turn this into a component property so I can use it in this ShoppingList component - like e.g.
-this.props.items
+what mapStateToProps() does is, it allows us to take our item state (from itemReducer.js ) and turn this into a component property so I can use it in this ShoppingList component - like e.g. `this.props.items`
+
 mapStateToProps() has the Store state as an argument and its used to link the component with certain part of the store state . In returned object from mapStateToProps() below, I am using 'item' as key because thats what I am calling it in my rootReducer (./reducers/index.js)
 
 ```js
@@ -52,7 +52,20 @@ export default connect(
 )(ShoppingList);
 ```
 
-mapStateToProps and mapDispatchToProps are both pure functions that are provided with the (or passed to them), the stores “state” and “dispatch” respectively. Furthermore, both functions have to return an object, whose keys will then be passed on as the props of the component they are connected to (ShoppingList in this case).
+mapStateToProps and mapDispatchToProps are both pure functions that are provided with (or passed to them), the stores “state” and “dispatch” respectively. Furthermore, both functions have to return an object, whose keys will then be passed on as the props of the component they are connected to (ShoppingList in this case).
+
+#### MOST IMPORTANT POINT (THAT BAFFLED ME INITIALLY) - How dows mapStateToProps know which is this 'item' variable that I am talking about.
+
+##### And the answer is from the rootReducer (./reducers/index.js) file. There, from combineReducers() functions I am returning all the state that ./itemReducer.js file is returning. by doing this
+
+```js
+import { combineReducers } from "redux";
+import itemReducer from "./itemReducer";
+
+export default combineReducers({
+  item: itemReducer
+});
+```
 
 ## 2. mapStateToProps - General Syntax - 2nd Example
 
@@ -109,7 +122,7 @@ On the other hand, when we want to retrieve data, we do not get it directly from
 
 This is precisely what connect does. It maps the store's state and dispatch to the props of a component :
 
-mapStateToProps and mapDispatchToProps are both pure functions that are provided with the (or passed to them), stores “state” and “dispatch” respectively. Furthermore, both functions have to return an object, whose keys will then be passed on as the props of the component they are connected to (ShoppingList in this case).
+**mapStateToProps** and **mapDispatchToProps** are both pure functions that are provided with the (or passed to them), stores “state” and “dispatch” respectively. Furthermore, both functions have to return an object, whose keys will then be passed on as the props of the component they are connected to (ShoppingList in this case).
 
 In this case, mapStateToProps returns an object with only one key : “item”.
 

Redux/mapStateToProps-how-exactly-it-gets-the-state-from-reducers.md

@@ -0,0 +1,124 @@
+##### How exactly does mapStateToProps know which is the state variable that I am talking about. In other words, when I have many reducers file how each component, will get its specific states from mapStateToProps()
+
+Lets say I have a module (among many ) called Tidal in my App, that will get and render tidal data.
+
+##### So here's part of the ../actions/tidalActions.js file (There will be many other action file as well for all other modules of the app)
+
+```js
+import {
+  FETCH_ALL_TIDES,
+  FETCH_CURRENT_TIDES,
+  FETCH_CURRENT_WEEK_TIDES
+} from "./types";
+
+export const getAllTides = () => async dispatch => {
+  const res = await axios.get("/api/tidal/alltides");
+  dispatch({ type: FETCH_ALL_TIDES, payload: res.data });
+};
+
+export const getCurrentDateTides = () => async dispatch => {
+  const res = await axios.get("/api/tidal/currentdate");
+  dispatch({ type: FETCH_CURRENT_TIDES, payload: res.data });
+};
+
+export const getCurrentWeekTides = () => async dispatch => {
+  const res = await axios.get("/api/tidal/currentweek");
+  dispatch({ type: FETCH_CURRENT_WEEK_TIDES, payload: res.data });
+};
+```
+
+##### Here's part of the reducer file - ../reducers/tidalReducers.js - (there will be many other reducers for the other modules of the app)
+
+```js
+import {
+  FETCH_CURRENT_TIDES,
+  FETCH_CURRENT_WEEK_TIDES,
+  FETCH_ALL_TIDES
+} from "../actions/types";
+
+const initialState = {
+  list: [],
+  currentDate: [],
+  currentWeek: []
+};
+
+export default function(state = initialState, actions) {
+  switch (actions.type) {
+    case FETCH_ALL_TIDES:
+      return { ...state, list: actions.payload };
+    case FETCH_CURRENT_TIDES:
+      return { ...state, currentDate: actions.payload };
+    case FETCH_CURRENT_WEEK_TIDES:
+      return { ...state, currentWeek: actions.payload };
+    default:
+      return state;
+  }
+}
+```
+
+##### And finally here the root-reducer file - ../reducers/index.js - which will return all the reducers file's results through the combineReducers() function.
+
+```js
+import { combineReducers } from "redux";
+import galleryReducers from "./galleryReducers";
+import tidalReducers from "./tidalReducers";
+import documentReducers from "./documentReducers";
+import tariffReducers from "./tariffReducers";
+import projectReducers from "./projectReducers";
+
+export default combineReducers({
+  tides: tidalReducers,
+
+  documents: documentReducers,
+
+  gos: goReducers,
+
+  tariffs: tariffReducers,
+
+  gallery: galleryReducers,
+
+  project: projectReducers
+});
+```
+
+See, that for each of the reducers I am returning the state object specifying a single variable as the key. So for the tidalReducers, I am returning the key as 'tides'
+
+#### And thats the most important point
+
+Now in the relevant tidal component - say its name is TidalList.js I need to have access to the to the three states from store, that tidalReducers is returning
+
+```
+const initialState = {
+list: [],
+currentDate: [],
+currentWeek: []
+};
+```
+
+SO I PULL IN THE 'tides' VARIABLE WITH mapStateToProps() as below - NOTE, I HAVE TO HAVE THE ARGUMENT OF mapStateToProps() withing the curly braces to match exactly what the root-reducer returned inside combineReducers function - inside ../reducers/index.js file
+
+```js
+const mapStateToProps = ({ tides }) => {
+  return { tides: tides.currentWeek };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    getAllCurrentWeekTidesDispatch: () => {
+      dispatch(getCurrentWeekTides());
+    },
+    deleteTide,
+    dispatch
+  };
+};
+
+TidalsList.propTypes = {
+  tides: PropTypes.array.isRequired,
+  classes: PropTypes.object.isRequired
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(TidalsList));
+```