Skip to content

Commit

Permalink
Drop versioned docs entirely (#1696)
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson authored Mar 20, 2021
1 parent 45dfd45 commit 9005c4a
Show file tree
Hide file tree
Showing 19 changed files with 249 additions and 425 deletions.
12 changes: 0 additions & 12 deletions docs/README.md

This file was deleted.

51 changes: 4 additions & 47 deletions docs/api/Provider.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ hide_title: true

## Overview

The `<Provider />` makes the Redux `store` available to any nested components that have been wrapped in the `connect()` function.
The `<Provider>` 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 `<Provider>` 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 `<Provider>` 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 `<Provider>`.
The [Hooks](./hooks.md) and [`connect`](./connect.md) APIs can then access the provided store instance via React's Context mechanism.

### Props

Expand All @@ -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 `<Provider>`, or pass a custom React context provider to `<Provider>` 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 (
<ReactReduxContext.Consumer>
{({ store }) => {
// do something with the store here
}}
</ReactReduxContext.Consumer>
)
}
```


### Example Usage

In the example below, the `<App />` 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'
Expand All @@ -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(
<Provider store={store}>
<Router history={history}>
<Route exact path="/" component={App} />
<Route path="/foo" component={Foo} />
<Route path="/bar" component={Bar} />
</Router>
</Provider>,
document.getElementById('root')
)
```
2 changes: 2 additions & 0 deletions docs/api/batch.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
7 changes: 6 additions & 1 deletion docs/api/connect-advanced.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 10 additions & 0 deletions docs/api/connect.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
4 changes: 2 additions & 2 deletions docs/api/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
122 changes: 122 additions & 0 deletions docs/introduction/getting-started.md
Original file line number Diff line number Diff line change
@@ -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 `<Provider />` 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(
<Provider store={store}>
<App />
</Provider>,
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 (
<div>
<div className={styles.row}>
<button
className={styles.button}
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
+
</button>
<span className={styles.value}>{count}</span>
<button
className={styles.button}
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
-
</button>
</div>
{/* omit additional rendering output here */}
</div>
)
}
```

## 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)
91 changes: 0 additions & 91 deletions docs/introduction/quick-start.md

This file was deleted.

Loading

0 comments on commit 9005c4a

Please sign in to comment.