diff --git a/docs/README.md b/docs/README.md index 8ccb64c27..fd1256e3c 100644 --- a/docs/README.md +++ b/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) - [``](api.md#provider-store) - [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) diff --git a/docs/api.md b/docs/api.md index 78b2eb2db..3252f6e7f 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,7 +1,7 @@ --- id: api title: Api -sidebar_label: Api +sidebar_label: API hide_title: true --- diff --git a/docs/getting-started.md b/docs/getting-started.md index f56c2e08c..fce40e6dd 100644 --- a/docs/getting-started.md +++ b/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) - - [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/) diff --git a/docs/connect-extracting-data-with-mapStateToProps.md b/docs/using-react-redux/connect-extracting-data-with-mapStateToProps.md similarity index 97% rename from docs/connect-extracting-data-with-mapStateToProps.md rename to docs/using-react-redux/connect-extracting-data-with-mapStateToProps.md index 228d37666..f1ca2557e 100644 --- a/docs/connect-extracting-data-with-mapStateToProps.md +++ b/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
or
any field of `ownProps` is different | +| `mapStateToProps` runs when: | store `state` changes | store `state` changes
or
any field of `ownProps` is different | | component re-renders when: | any field of `stateProps` is different | any field of `stateProps` is different
or
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) { } ``` - - - - - ## Links and References **Tutorials** diff --git a/website/core/Footer.js b/website/core/Footer.js index 2d825d7ee..1102b74aa 100644 --- a/website/core/Footer.js +++ b/website/core/Footer.js @@ -34,15 +34,16 @@ class Footer extends React.Component {
Docs
- - Getting Started - - - Api - - - Troubleshooting + Introduction + + Using React-Redux + API Reference + Guides
Community
diff --git a/website/sidebars.json b/website/sidebars.json index af3f2346f..994b3dd38 100644 --- a/website/sidebars.json +++ b/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"] } diff --git a/website/siteConfig.js b/website/siteConfig.js index 62ecf5f12..dca879725 100644 --- a/website/siteConfig.js +++ b/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;