Clean-Ups after mapState (#1042)

## What does this PR do?
Regarding #1001, a few follow up fixes on the `mapState` piece.

## Summary of the changes
- Site header:
  - Remove "Troubleshooting"
  - Uppercase "API"
  - Add "Using React-Redux" and let it direct to the `mapState` doc
- Site sidebar:
  - Uppercase "API"
  - Add a dash to "React-Redux"
- Site footer:
  - Add "Using React-Redux"
  - Align all link labels with section names on the sidebar
- Doc changes
  - `<ConnectedTodo>` typo
  - Changed a wording at the table for consistency
  - Add "./using-react-redux" directory and move in mapState.md
  - Add `array.slice` to the list of options that create new references

Author: wgao19

docs/README.md

@@ -2,7 +2,7 @@
 
 - [Getting Started: adding React-Redux to a React todo app](./getting-started.md)
 - Using React-Redux
-  - [Connect: Extracting Data with `mapStateToProps`](./connect-extracting-data-with-mapStateToProps.md)
+  - [Connect: Extracting Data with `mapStateToProps`](./using-react-redux/connect-extracting-data-with-mapStateToProps.md)
 - [API](api.md#api)
   - [`<Provider store>`](api.md#provider-store)
   - [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)

docs/api.md

@@ -1,7 +1,7 @@
 ---
 id: api
 title: Api
-sidebar_label: Api
+sidebar_label: API
 hide_title: true
 ---
 

docs/getting-started.md

@@ -187,7 +187,7 @@ Our `addTodo` action creator looks like this:
 
 ```js
 // redux/actions.js
-import { ADD_TODO } from './actionTypes';
+import { ADD_TODO } from "./actionTypes";
 
 let nextTodoId = 0;
 export const addTodo = content => ({
@@ -497,7 +497,6 @@ Now we've finished a very simple example of a todo app with React-Redux. All our
 - [Usage with React](https://redux.js.org/basics/usagewithreact)
 - [Using the React-Redux Bindings](https://blog.isquaredsoftware.com/presentations/workshops/redux-fundamentals/react-redux.html)
 - [Higher Order Components in Depth](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e)
-  <!-- - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) -->
 - [Computing Derived Data](https://redux.js.org/recipes/computingderiveddata#sharing-selectors-across-multiple-components)
 - [Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance](https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/)
 

docs/connect-extracting-data-with-mapStateToProps.md renamed to docs/using-react-redux/connect-extracting-data-with-mapStateToProps.md

@@ -131,7 +131,7 @@ To summarize the behavior of the component wrapped by `connect` with `mapStateTo
 
 |                              | `(state) => stateProps`                | `(state, ownProps) => stateProps`                                                            |
 | ---------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `mapStateToProps` runs when: | store `state` is `===` different       | store `state` changes <br /> or <br />any field of `ownProps` is different                   |
+| `mapStateToProps` runs when: | store `state` changes       | store `state` changes <br /> or <br />any field of `ownProps` is different                   |
 | component re-renders when:   | any field of `stateProps` is different | any field of `stateProps` is different <br /> or <br /> any field of `ownProps` is different |
 
 
@@ -143,6 +143,7 @@ Many common operations result in new object or array references being created:
 
 - Creating new arrays with `someArray.map()` or `someArray.filter()`
 - Merging arrays with `array.concat`
+- Selecting portion of an array with `array.slice`
 - Copying values with `Object.assign`
 - Copying values with the spread operator `{ ...oldState, ...newData }`
 
@@ -223,16 +224,6 @@ function mapStateToProps(...args) {
 }
 ```
 
-
-
-
-<!--
-## Next Up
-- Connect: Dispatching Actions with `mapDispatchToProps` →
-- Further optimizing `mapStateToProps` performances by writing memoized selectors or using Reselect →
-- Understanding whys and hows →
--->
-
 ## Links and References
 
 **Tutorials**

website/core/Footer.js

@@ -34,15 +34,16 @@ class Footer extends React.Component {
           </a>
           <div>
             <h5>Docs</h5>
-            <a href={this.docUrl("getting-started")}>
-              Getting Started
-            </a>
-            <a href={this.docUrl("api")}>
-              Api
-            </a>
-            <a href={this.docUrl("troubleshooting")}>
-              Troubleshooting
+            <a href={this.docUrl("getting-started")}>Introduction</a>
+            <a
+              href={this.docUrl(
+                "using-react-redux/connect-extracting-data-with-mapStateToProps"
+              )}
+            >
+              Using React-Redux
             </a>
+            <a href={this.docUrl("api")}>API Reference</a>
+            <a href={this.docUrl("troubleshooting")}>Guides</a>
           </div>
           <div>
             <h5>Community</h5>

website/sidebars.json

@@ -1,7 +1,9 @@
 {
   "docs": {
     "Introduction": ["getting-started"],
-    "Using React Redux": ["connect-extracting-data-with-mapStateToProps"],
+    "Using React-Redux": [
+      "using-react-redux/connect-extracting-data-with-mapStateToProps"
+    ],
     "API Reference": ["api", "api/provider"],
     "Guides": ["troubleshooting"]
   }

website/siteConfig.js

@@ -26,9 +26,12 @@ const siteConfig = {
 
   // For no header links in the top nav bar -> headerLinks: [],
   headerLinks: [
-    { doc: "getting-started", label: "Getting started" },
-    { doc: "api", label: "Api" },
-    { doc: "troubleshooting", label: "Troubleshooting" }
+    { doc: "getting-started", label: "Getting Started" },
+    {
+      doc: "using-react-redux/connect-extracting-data-with-mapStateToProps",
+      label: "Using React-Redux"
+    },
+    { doc: "api", label: "API" }
   ],
 
   /* path to images for header/footer */
@@ -39,7 +42,7 @@ const siteConfig = {
   /* Colors for website */
   colors: {
     primaryColor: "#764ABC",
-    secondaryColor: "#764ABC",
+    secondaryColor: "#764ABC"
   },
 
   /* Custom fonts for website */
@@ -78,7 +81,7 @@ const siteConfig = {
 
   // You may provide arbitrary config keys to be used as needed by your
   // template. For example, if you need your repo's URL...
-  repoUrl: "https://github.com/reduxjs/react-redux",
+  repoUrl: "https://github.com/reduxjs/react-redux"
 };
 
 module.exports = siteConfig;