From 9005c4abfd9058f3aa78ad0a162eee6b7c94322f Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 20 Mar 2021 00:36:11 -0400 Subject: [PATCH] Drop versioned docs entirely (#1696) --- docs/README.md | 12 -- docs/api/Provider.md | 51 +------- docs/api/batch.md | 2 + docs/api/connect-advanced.md | 7 +- docs/api/connect.md | 10 ++ docs/api/hooks.md | 4 +- docs/introduction/getting-started.md | 122 ++++++++++++++++++ docs/introduction/quick-start.md | 91 ------------- docs/troubleshooting.md | 61 +-------- .../connect.md} | 16 ++- docs/using-react-redux/accessing-store.md | 28 ++-- ...atic-types.md => usage-with-typescript.md} | 32 +++-- website/_redirects | 17 +++ website/docusaurus.config.js | 43 ++---- website/sidebars.js | 23 ++++ website/sidebars.json | 23 ---- website/src/pages/_versions.js | 115 ----------------- website/src/pages/index.js | 10 +- website/versions.json | 7 - 19 files changed, 249 insertions(+), 425 deletions(-) delete mode 100644 docs/README.md create mode 100644 docs/introduction/getting-started.md delete mode 100644 docs/introduction/quick-start.md rename docs/{introduction/basic-tutorial.md => tutorials/connect.md} (96%) rename docs/using-react-redux/{static-types.md => usage-with-typescript.md} (88%) create mode 100644 website/sidebars.js delete mode 100644 website/sidebars.json delete mode 100644 website/src/pages/_versions.js delete mode 100644 website/versions.json diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 8b7ed5571..000000000 --- a/docs/README.md +++ /dev/null @@ -1,12 +0,0 @@ -# Table of Contents - -- Introduction - - [Quick Start: adding React Redux to a React todo app](./introduction/quick-start.md) - - [Basic Tutorial](./introduction/basic-tutorial.md) -- Using React Redux - - [Connect: Extracting Data with `mapStateToProps`](./using-react-redux/connect-extracting-data-with-mapStateToProps.md) -- API - - [``](./api/Provider.md) - - [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](./api/connect.md) - - [`connectAdvanced(selectorFactory, [connectOptions])`](./api/connect-advanced.md) -- [Troubleshooting](troubleshooting.md#troubleshooting) diff --git a/docs/api/Provider.md b/docs/api/Provider.md index 1f7d96d04..0efcdb292 100644 --- a/docs/api/Provider.md +++ b/docs/api/Provider.md @@ -9,11 +9,11 @@ hide_title: true ## Overview -The `` makes the Redux `store` available to any nested components that have been wrapped in the `connect()` function. +The `` component makes the Redux `store` available to any nested components that need to access the Redux store. -Since any React component in a React Redux app can be connected, most applications will render a `` at the top level, with the entire app’s component tree inside of it. +Since any React component in a React Redux app can be connected to the store, most applications will render a `` at the top level, with the entire app’s component tree inside of it. -Normally, you can’t use a connected component unless it is nested inside of a ``. +The [Hooks](./hooks.md) and [`connect`](./connect.md) APIs can then access the provided store instance via React's Context mechanism. ### Props @@ -30,29 +30,12 @@ You may provide a context instance. If you do so, you will need to provide the s > > Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a ``, or pass a custom React context provider to `` and the corresponding React context consumer to Connect(Todo) in connect options. -**Note:** You do not need to provide custom context in order to access the store. -React Redux exports the context instance it uses by default so that you can access the store by: - -```js -import { ReactReduxContext } from 'react-redux' - -// in your connected component -render() { - return ( - - {({ store }) => { - // do something with the store here - }} - - ) -} -``` + ### Example Usage In the example below, the `` component is our root-level component. This means it’s at the very top of our component hierarchy. -**Vanilla React Example** ```jsx import React from 'react' @@ -72,29 +55,3 @@ ReactDOM.render( ) ``` -**Usage with React Router** - -```jsx -import React from 'react' -import ReactDOM from 'react-dom' -import { Provider } from 'react-redux' -import { Router, Route } from 'react-router-dom' - -import { App } from './App' -import { Foo } from './Foo' -import { Bar } from './Bar' -import createStore from './createReduxStore' - -const store = createStore() - -ReactDOM.render( - - - - - - - , - document.getElementById('root') -) -``` diff --git a/docs/api/batch.md b/docs/api/batch.md index dcde159a4..a529c870e 100644 --- a/docs/api/batch.md +++ b/docs/api/batch.md @@ -11,6 +11,8 @@ hide_title: true batch((fn: Function)) ``` +*added in v7.0.0* + React's `unstable_batchedUpdates()` API allows any React updates in an event loop tick to be batched together into a single render pass. React already uses this internally for its own event handler callbacks. This API is actually part of the renderer packages like ReactDOM and React Native, not the React core itself. Since React-Redux needs to work in both ReactDOM and React Native environments, we've taken care of importing this API from the correct renderer at build time for our own use. We also now re-export this function publicly ourselves, renamed to `batch()`. You can use it to ensure that multiple actions dispatched outside of React only result in a single render update, like this: diff --git a/docs/api/connect-advanced.md b/docs/api/connect-advanced.md index 13ba120b8..8c80ca552 100644 --- a/docs/api/connect-advanced.md +++ b/docs/api/connect-advanced.md @@ -17,7 +17,12 @@ It does not modify the component class passed to it; instead, it _returns_ a new Most applications will not need to use this, as the default behavior in `connect` is intended to work for most use cases. -> Note: `connectAdvanced` was added in version 5.0, and `connect` was reimplemented as a specific set of parameters to `connectAdvanced`. +:::info + +`connectAdvanced` was added in version 5.0, and `connect` was reimplemented as a specific set of parameters to `connectAdvanced`. However, [**`connectAdvanced` is now deprecated**](https://github.com/reduxjs/react-redux/issues/1236) and will eventually be removed in a future major version of React Redux. + +::: + ## Arguments diff --git a/docs/api/connect.md b/docs/api/connect.md index 985e75f53..746e31e13 100644 --- a/docs/api/connect.md +++ b/docs/api/connect.md @@ -577,3 +577,13 @@ const makeMapState = (state) => { } export default connect(makeMapState)(SomeComponent) ``` + + +## Legacy Version Docs + +While the `connect` API has stayed almost entirely API-compatible between all of our major versions, there have been some small changes in options and behavior from version to version. + +For details on the legacy 5.x and 6.x versions, please see these archived files in the React Redux repo: + +- [5.x `connect` API reference](https://github.com/reduxjs/react-redux/blob/v7.2.2/website/versioned_docs/version-5.x/api/connect.md) +- [6.x `connect` API reference](https://github.com/reduxjs/react-redux/blob/v7.2.2/website/versioned_docs/version-6.x/api/connect.md) \ No newline at end of file diff --git a/docs/api/hooks.md b/docs/api/hooks.md index 82ba8f6ec..3a398c623 100644 --- a/docs/api/hooks.md +++ b/docs/api/hooks.md @@ -7,9 +7,9 @@ hide_title: true # Hooks -React's new ["hooks" APIs](https://reactjs.org/docs/hooks-intro.html) give function components the ability to use local component state, execute side effects, and more. +React's new ["hooks" APIs](https://reactjs.org/docs/hooks-intro.html) give function components the ability to use local component state, execute side effects, and more. React also lets us write [custom hooks](https://reactjs.org/docs/hooks-custom.html), which let us extract reusable hooks to add our own behavior on top of React's built-in hooks. -React Redux now offers a set of hook APIs as an alternative to the existing `connect()` Higher Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in `connect()`. +React Redux includes its own custom hook APIs, which allow your React components to subscribe to the Redux store and dispatch actions. :::tip diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md new file mode 100644 index 000000000..9508ece55 --- /dev/null +++ b/docs/introduction/getting-started.md @@ -0,0 +1,122 @@ +--- +id: getting-started +title: Getting Started +hide_title: true +sidebar_label: Getting Started +--- + +# Getting Started with React Redux + +[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://reactjs.org/) UI bindings layer for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update state. + +## Installation + +React Redux 7.1+ requires **React 16.8.3 or later**, in order to make use of React Hooks. + +### Using Create React App + +The recommended way to start new apps with React Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of [Redux Toolkit](https://redux-toolkit.js.org/). + +```sh +npx create-react-app my-app --template redux +``` + +### An Existing React App + +To use React Redux with your React app, install it as a dependency: + +```bash +# If you use npm: +npm install react-redux + +# Or if you use Yarn: +yarn add react-redux +``` + +You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app. + +If you are using TypeScript, the React Redux types are maintained separately in DefinitelyTyped. You'll need to install those as well: + +```bash +npm install @types/react-redux +``` + +## `Provider` + +React Redux includes a `` component, which makes the Redux store available to the rest of your app: + +```js +import React from 'react' +import ReactDOM from 'react-dom' + +import { Provider } from 'react-redux' +import store from './store' + +import App from './App' + +const rootElement = document.getElementById('root') +ReactDOM.render( + + + , + rootElement +) +``` + +## Hooks + +React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store. + +`useSelector` reads a value from the store state and subscribes to updates, while `useDispatch` returns the store's `dispatch` method to let you dispatch actions. + +```js +import React, { useState } from 'react' +import { useSelector, useDispatch } from 'react-redux' +import { + decrement, + increment, + incrementByAmount, + incrementAsync, + selectCount +} from './counterSlice' +import styles from './Counter.module.css' + +export function Counter() { + const count = useSelector(selectCount) + const dispatch = useDispatch() + const [incrementAmount, setIncrementAmount] = useState('2') + + return ( +
+
+ + {count} + +
+ {/* omit additional rendering output here */} +
+ ) +} +``` + +## Help and Discussion + +The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us! + +You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**. + +## Docs Translations + +- [Portuguese](https://fernandobelotto.github.io/react-redux) diff --git a/docs/introduction/quick-start.md b/docs/introduction/quick-start.md deleted file mode 100644 index 14656c80b..000000000 --- a/docs/introduction/quick-start.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: quick-start -title: Quick Start -hide_title: true -sidebar_label: Quick Start ---- - -# Quick Start - -[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://reactjs.org/) binding for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update data. - -## Installation - -React Redux 7.2 requires **React 16.8.3 or later.** - -### Using Create React App - -The recommended way to start new apps with React Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of [Redux Toolkit](https://redux-toolkit.js.org/). - -```sh -npx create-react-app my-app --template redux -``` - -### An Existing React App - -To use React Redux with your React app, install it as a dependency: - -```bash -# If you use npm: -npm install react-redux - -# Or if you use Yarn: -yarn add react-redux -``` - -You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app. - -## `Provider` - -React Redux provides ``, which makes the Redux store available to the rest of your app: - -```js -import React from 'react' -import ReactDOM from 'react-dom' - -import { Provider } from 'react-redux' -import store from './store' - -import App from './App' - -const rootElement = document.getElementById('root') -ReactDOM.render( - - - , - rootElement -) -``` - -## `connect()` - -React Redux provides a `connect` function for you to connect your component to the store. - -Normally, you’ll call `connect` in this way: - -```js -import { connect } from 'react-redux' -import { increment, decrement, reset } from './actionCreators' - -// const Counter = ... - -const mapStateToProps = (state /*, ownProps*/) => { - return { - counter: state.counter, - } -} - -const mapDispatchToProps = { increment, decrement, reset } - -export default connect(mapStateToProps, mapDispatchToProps)(Counter) -``` - -## Help and Discussion - -The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us! - -You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**. - -## Docs Translations - -- [Portuguese](https://fernandobelotto.github.io/react-redux) diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 892e80358..44ef43231 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -7,74 +7,19 @@ hide_title: true ## Troubleshooting -Make sure to check out [Troubleshooting Redux](https://redux.js.org/troubleshooting) first. +The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us! -### I'm getting the following alert: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead. +You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**. -This warning is shown when using react 15.5.\*. Basically, now it's just a warning, but in react16 the application might break. the PropTypes should now be imported from 'prop-types' package, and not from the react package. - -Update to the latest version of react-redux. ### My views aren’t updating! -See the link above. In short, - Reducers should never mutate state, they must return new objects, or React Redux won’t see the updates. -- Make sure you either bind action creators with the `mapDispatchToProps` argument to `connect()` or with the `bindActionCreators()` method, or that you manually call `dispatch()`. Just calling your `MyActionCreators.addTodo()` function won’t work because it just _returns_ an action, but does not _dispatch_ it. - -### My views aren’t updating on route change with React Router 0.13 - -If you’re using React Router 0.13, you might [bump into this problem](https://github.com/reduxjs/react-redux/issues/43). The solution is simple: whenever you use `` or the `Handler` provided by `Router.run`, pass the router state to it. - -Root view: - -```jsx -Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { - // note "routerState" here - ReactDOM.render( - - {/* note "routerState" here */} - - , - document.getElementById('root') - ) -}) -``` - -Nested view: - -```js -render() { - // Keep passing it down - return -} -``` - -Conveniently, this gives your components access to the router state! -You can also upgrade to React Router 1.0 which shouldn’t have this problem. (Let us know if it does!) - -### My views aren’t updating when something changes outside of Redux - -If your views depend on global state or [React “context”](http://facebook.github.io/react/docs/context.html), you might find that views decorated with `connect()` will fail to update. - -> This is because `connect()` implements [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to React’s [PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html). - -The _best_ solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application. +- Make sure you are actually _dispatching_ actions. For example, if you have an action creator like `addTodo`, just calling the imported `addTodo()` function by itself won't do anything because it just _returns_ an action, but does not _dispatch_ it. You either need to call `dispatch(addTodo())` (if using the hooks API) or `props.addTodo()` (if using `connect` + `mapDispatch`). -If that’s not practical for whatever reason (for example, if you’re using a library that depends heavily on React context), you may pass the `pure: false` option to `connect()`: - -```js -function mapStateToProps(state) { - return { todos: state.todos } -} - -export default connect(mapStateToProps, null, null, { - pure: false, -})(TodoApp) -``` -This will remove the assumption that `TodoApp` is pure and cause it to update whenever its parent component renders. Note that this will make your application less performant, so only do this if you have no other option. ### Could not find "store" in either the context or props diff --git a/docs/introduction/basic-tutorial.md b/docs/tutorials/connect.md similarity index 96% rename from docs/introduction/basic-tutorial.md rename to docs/tutorials/connect.md index 920bfd358..63717dbd3 100644 --- a/docs/introduction/basic-tutorial.md +++ b/docs/tutorials/connect.md @@ -1,11 +1,19 @@ --- -id: basic-tutorial -title: Basic Tutorial +id: connect +title: "Tutorial: Connect API" hide_title: true -sidebar_label: Basic Tutorial +sidebar_label: --- -# Basic Tutorial +# Tutorial: Using the `connect` API + +:::tip + +We now recommend using [the React-Redux hooks API as the default](../api/hooks.md). However, the `connect` API still works fine. + +This tutorial also shows some older practices we no longer recommend, like separating Redux logic into folders by type. We've kept this tutorial as-is for completeness, but recommend reading through [the "Redux Essentials" tutorial](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) and the [Redux Style Guide](https://redux.js.org/style-guide/style-guide) in the Redux docs for our current best practices. + +::: To see how to use React Redux in practice, we’ll show a step-by-step example by creating a todo list app. diff --git a/docs/using-react-redux/accessing-store.md b/docs/using-react-redux/accessing-store.md index be32e290d..5fb698b25 100644 --- a/docs/using-react-redux/accessing-store.md +++ b/docs/using-react-redux/accessing-store.md @@ -34,7 +34,7 @@ The [`useStore` hook](../api/hooks.md#useStore) returns the current store instan Instead of using the default context instance from React Redux, you may supply your own custom context instance. -```js +```jsx @@ -75,7 +75,7 @@ The following runtime error occurs when React Redux does not find a store in the ## Multiple Stores [Redux was designed to use a single store](https://redux.js.org/api/store#a-note-for-flux-users). -However, if you are in an unavoidable position of needing to use multiple stores, with v6 you may do so by providing (multiple) custom contexts. +However, if you are in an unavoidable position of needing to use multiple stores, as of v6 you may do so by providing (multiple) custom contexts. This also provides a natural isolation of the stores as they live in separate context instances. ```js @@ -118,17 +118,26 @@ compose( In rare cases, you may need to access the Redux store directly in your own components. This can be done by rendering the appropriate context consumer yourself, and accessing the `store` field out of the context value. -> **Note**: This is **_not_ considered part of the React Redux public API, and may break without notice**. We do recognize -> that the community has use cases where this is necessary, and will try to make it possible for users to build additional -> functionality on top of React Redux, but our specific use of context is considered an implementation detail. -> If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss -> possible API improvements. +:::caution -```js +This is **_not_ considered part of the React Redux public API, and may break without notice**. We do recognize +that the community has use cases where this is necessary, and will try to make it possible for users to build additional +functionality on top of React Redux, but our specific use of context is considered an implementation detail. +If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss +possible API improvements. + +::: + +```jsx import { ReactReduxContext } from 'react-redux' -// in your connected component +// Somewhere inside of a function MyConnectedComponent() { + // Access the store via the `useContext` hook + const {store} = useContext(ReactReduxContext) + + // alternately, use the render props form of the context + /* return ( {({ store }) => { @@ -137,6 +146,7 @@ function MyConnectedComponent() { }} ) + */ } ``` diff --git a/docs/using-react-redux/static-types.md b/docs/using-react-redux/usage-with-typescript.md similarity index 88% rename from docs/using-react-redux/static-types.md rename to docs/using-react-redux/usage-with-typescript.md index 59ad1e5b8..275ef9790 100644 --- a/docs/using-react-redux/static-types.md +++ b/docs/using-react-redux/usage-with-typescript.md @@ -1,19 +1,17 @@ --- -id: static-typing -title: Static Typing +id: usage-with-typescript +title: Usage with TypeScript hide_title: true -sidebar_label: Static Typing +sidebar_label: Usage with TypeScript --- -# Static Typing +# Usage with TypeScript -React-Redux is currently written in plain JavaScript. However, it works well with static type systems such as TypeScript and Flow. +React-Redux itself is currently written in plain JavaScript. However, it works well with static type systems such as TypeScript and Flow. -## TypeScript +React-Redux doesn't ship with its own type definitions. If you are using TypeScript you should install the [`@types/react-redux` type definitions](https://npm.im/@types/react-redux) from NPM. In addition to typing the library functions, the types also export some helpers to make it easier to write typesafe interfaces between your Redux store and your React components. -React-Redux doesn't ship with its own type definitions. If you are using Typescript you should install the [`@types/react-redux` type definitions](https://npm.im/@types/react-redux) from npm. In addition to typing the library functions, the types also export some helpers to make it easier to write typesafe interfaces between your Redux store and your React components. - -### Defining the Root State Type +## Defining the Root State Type Both `mapState` and `useSelector` depend on declaring the type of the complete Redux store state value. While this type could be written by hand, the easiest way to define it is to have TypeScript infer it based on what your root reducer function returns. This way, the type is automatically updated as the reducer functions are modified. @@ -29,7 +27,7 @@ export type RootState = ReturnType // {posts: PostsState, comments: CommentsState, users: UsersState} ``` -### Typing the `useSelector` hook +## Typing the `useSelector` hook When writing selector functions for use with `useSelector`, you should explicitly define the type of the `state` parameter. TS should be able to then infer the return type of the selector, which will be reused as the return type of the `useSelector` hook: @@ -63,7 +61,7 @@ import { useTypedSelector } from './reducer.ts' const isOn = useTypedSelector((state) => state.isOn) ``` -### Typing the `useDispatch` hook +## Typing the `useDispatch` hook By default, the return value of `useDispatch` is the standard `Dispatch` type defined by the Redux core types, so no declarations are needed: @@ -88,9 +86,9 @@ export type AppDispatch = typeof store.dispatch export const useAppDispatch = () => useDispatch() // Export a hook that can be reused to resolve types ``` -### Typing the `connect` higher order component +## Typing the `connect` higher order component -#### Manually Typing `connect` +### Manually Typing `connect` The `connect` higher-order component is somewhat complex to type, because there are 3 sources of props: `mapStateToProps`, `mapDispatchToProps`, and props passed in from the parent component. Here's a full example of what it looks like to do that manually. @@ -153,7 +151,7 @@ type Props = StateProps & DispatchProps & OwnProps However, inferring the type of `mapDispatch` this way will break if it is defined as an object and also refers to thunks. -#### Inferring The Connected Props Automatically +### Inferring The Connected Props Automatically `connect` consists of two functions that are called sequentially. The first function accepts `mapState` and `mapDispatch` as arguments, and returns a second function. The second function accepts the component to be wrapped, and returns a new wrapper component that passes down the props from `mapState` and `mapDispatch`. Normally, both functions are called together, like `connect(mapState, mapDispatch)(MyComponent)`. @@ -216,7 +214,7 @@ type PropsFromRedux = ConnectedProps export default connector(MyComponent) ``` -### Recommendations +## Recommendations The hooks API is generally simpler to use with static types. **If you're looking for the easiest solution for using static types with React-Redux, use the hooks API.** @@ -226,7 +224,7 @@ If you're using `connect`, **we recommend using the `ConnectedProps` approach For additional information, see these additional resources: -- [Redux docs: Usage with TypeScript](https://redux.js.org/recipes/usage-with-typescript): Examples of how to declare types for actions, reducers, and the store -- [Redux Toolkit docs: Advanced Tutorial](https://redux-toolkit.js.org/tutorials/advanced-tutorial): shows how to use RTK and the React-Redux hooks API with TypeScript +- [Redux docs: Usage with TypeScript](https://redux.js.org/recipes/usage-with-typescript): Examples of how to use Redux Toolkit, the Redux core, and React Redux with TypeScript +- [Redux Toolkit docs: TypeScript Quick start](https://redux-toolkit.js.org/tutorials/typescript): shows how to use RTK and the React-Redux hooks API with TypeScript - [React+TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet): a comprehensive guide to using React with TypeScript - [React + Redux in TypeScript Guide](https://github.com/piotrwitek/react-redux-typescript-guide): extensive information on patterns for using React and Redux with TypeScript diff --git a/website/_redirects b/website/_redirects index eff1bc509..5de03acd3 100644 --- a/website/_redirects +++ b/website/_redirects @@ -4,3 +4,20 @@ /docs/using-react-redux/connect-dispatching-actions-with-mapdispatchtoprops /using-react-redux/connect-mapdispatch /docs/* /:splat + +# Renamed pages +/introduction/quick-start /introduction/getting-started +/next/introduction/quick-started /introduction/getting-started + +/introduction/basic-tutorial /tutorials/connect +/next/introduction/basic-tutorial /tutorials/connect + +/using-react-redux/static-typing /using-react-redux/usage-with-typescript + +# Drop versioned docs and redirect all legacy versions to the "current" version +/next/* /:splat +/5.x/* /:splat +/6.x/* /:splat +/7.0/* /:splat +/7.1/* /:splat +/versions /introduction/getting-started \ No newline at end of file diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 480c4c88d..23a46d46d 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -16,10 +16,10 @@ const siteConfig = { { docs: { path: '../docs', - sidebarPath: require.resolve('./sidebars.json'), + sidebarPath: require.resolve('./sidebars.js'), routeBasePath: '/', include: [ - '{api,introduction,using-react-redux}/*.{md,mdx}', + '{api,introduction,using-react-redux,tutorials}/*.{md,mdx}', 'troubleshooting.md' ] // no other way to exclude node_modules }, @@ -41,28 +41,11 @@ const siteConfig = { // Used for publishing and more projectName: 'react-redux', organizationName: 'reduxjs', - // For top-level user or org sites, the organization is still the same. - // e.g., for the https://JoelMarcey.github.io site, it would be set like... - // organizationName: 'JoelMarcey' // For no header links in the top nav bar -> headerLinks: [], /* path to images for header/footer */ favicon: 'img/favicon/favicon.ico', - /* Custom fonts for website */ - /* - fonts: { - myFont: [ - "Times New Roman", - "Serif" - ], - myOtherFont: [ - "-apple-system", - "system-ui" - ] - }, - */ - // Add custom scripts here that would be placed in