You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .github/ISSUE_TEMPLATE/---bug-report.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,4 +21,4 @@ about: Something isn't working correctly.
21
21
22
22
23
23
24
-
**Which versions of React, ReactDOM/React Native, Redux, and React-Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React-Redux?**
24
+
**Which versions of React, ReactDOM/React Native, Redux, and ReactRedux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of ReactRedux?**
Copy file name to clipboardExpand all lines: docs/api/Provider.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ sidebar_label: Provider
10
10
11
11
The `<Provider />` makes the Redux `store` available to any nested components that have been wrapped in the `connect()` function.
12
12
13
-
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.
13
+
Since any React component in a ReactRedux app can be connected, most applications will render a `<Provider>` at the top level, with the entire app’s component tree inside of it.
14
14
15
15
Normally, you can’t use a connected component unless it is nested inside of a `<Provider>` .
-[Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance](https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/)
Copy file name to clipboardExpand all lines: docs/introduction/quick-start.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,13 +7,13 @@ sidebar_label: Quick Start
7
7
8
8
# Quick Start
9
9
10
-
[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.
10
+
[ReactRedux](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.
11
11
12
12
## Installation
13
13
14
-
React-Redux version 6 requires **React 16.4 or later.**
14
+
ReactRedux 6.x requires **React 16.4 or later.**
15
15
16
-
To use React-Redux with your React app:
16
+
To use ReactRedux with your React app:
17
17
18
18
```bash
19
19
npm install --save react-redux
@@ -29,7 +29,7 @@ You'll also need to [install Redux](https://redux-docs.netlify.com/introduction/
29
29
30
30
## `Provider` and `connect`
31
31
32
-
React-Redux provides `<Provider />`, which makes the Redux store available to the rest of your app:
32
+
ReactRedux provides `<Provider />`, which makes the Redux store available to the rest of your app:
33
33
34
34
```js
35
35
importReactfrom"react";
@@ -49,7 +49,7 @@ ReactDOM.render(
49
49
);
50
50
```
51
51
52
-
React-Redux provides a `connect` function for you to connect your component to the store.
52
+
ReactRedux provides a `connect` function for you to connect your component to the store.
Copy file name to clipboardExpand all lines: docs/introduction/why-use-react-redux.md
+17-17Lines changed: 17 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,19 @@
1
1
---
2
2
id: why-use-react-redux
3
-
title: Why Use React-Redux?
3
+
title: Why Use ReactRedux?
4
4
hide_title: true
5
-
sidebar_label: Why Use React-Redux?
5
+
sidebar_label: Why Use ReactRedux?
6
6
---
7
7
8
-
# Why Use React-Redux?
8
+
# Why Use ReactRedux?
9
9
10
10
Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.
11
11
12
12
If you are using Redux with any kind of UI framework, you will normally use a "UI binding" library to tie Redux together with your UI framework, rather than directly interacting with the store from your UI code.
13
13
14
-
**React-Redux is the official Redux UI binding library for React**. If you are using Redux and React together, you should also use React-Redux to bind these two libraries.
14
+
**ReactRedux is the official Redux UI binding library for React**. If you are using Redux and React together, you should also use ReactRedux to bind these two libraries.
15
15
16
-
To understand why you should use React-Redux, it may help to understand what a "UI binding library" does.
16
+
To understand why you should use ReactRedux, it may help to understand what a "UI binding library" does.
17
17
18
18
> **Note**: If you have questions about whether you should use Redux in general, please see these articles for discussion of when and why you might want to use Redux, and how it's intended to be used:
19
19
>
@@ -38,18 +38,18 @@ Using Redux with _any_ UI layer requires [the same consistent set of steps](http
38
38
39
39
While it is possible to write this logic by hand, doing so would become very repetitive. In addition, optimizing UI performance would require complicated logic.
40
40
41
-
The process of subscribing to the store, checking for updated data, and triggering a re-render can be made more generic and reusable. **A UI binding library like React-Redux handles the store interaction logic, so you don't have to write that code yourself.**
41
+
The process of subscribing to the store, checking for updated data, and triggering a re-render can be made more generic and reusable. **A UI binding library like ReactRedux handles the store interaction logic, so you don't have to write that code yourself.**
42
42
43
-
> **Note**: For a deeper look at how React-Redux works internally and how it handles the store interaction for you, see **[Idiomatic Redux: The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)**.
43
+
> **Note**: For a deeper look at how ReactRedux works internally and how it handles the store interaction for you, see **[Idiomatic Redux: The History and Implementation of ReactRedux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)**.
44
44
45
45
46
-
## Reasons to Use React-Redux
46
+
## Reasons to Use ReactRedux
47
47
48
48
### It is the Official Redux UI Bindings for React
49
49
50
-
While Redux can be used with any UI layer, it was originally designed and intended for use with React. There are [UI binding layers for many other frameworks](https://redux.js.org/introduction/ecosystem#library-integration-and-bindings), but React-Redux is maintained directly by the Redux team.
50
+
While Redux can be used with any UI layer, it was originally designed and intended for use with React. There are [UI binding layers for many other frameworks](https://redux.js.org/introduction/ecosystem#library-integration-and-bindings), but ReactRedux is maintained directly by the Redux team.
51
51
52
-
As the offical Redux binding for React, React-Redux is kept up-to-date with any API changes from either library, to ensure that your React components behave as expected. Its intended usage adopts the design principles of React - writing declarative components.
52
+
As the offical Redux binding for React, ReactRedux is kept up-to-date with any API changes from either library, to ensure that your React components behave as expected. Its intended usage adopts the design principles of React - writing declarative components.
53
53
54
54
55
55
### It Encourages Good React Architecture
@@ -58,7 +58,7 @@ React components are a lot like functions. While it's possible to write all you
58
58
59
59
Similarly, while you can write large React components that handle many different tasks, it's usually better to split up components based on responsibilities. In particular, it is common to have "container" components that are responsible for collecting and managing some kind of data, and "presentational" components that simply display UI based on whatever data they've received as props.
60
60
61
-
**The React-Redux `connect` function generates "container" wrapper components that handle the process of interacting with the store for you**. That way, your own components can focus on other tasks, whether it be collecting other data, or just displaying a piece of the UI. In addition, **`connect` abstracts away the question of _which_ store is being used, making your own components more reusable**.
61
+
**The ReactRedux `connect` function generates "container" wrapper components that handle the process of interacting with the store for you**. That way, your own components can focus on other tasks, whether it be collecting other data, or just displaying a piece of the UI. In addition, **`connect` abstracts away the question of _which_ store is being used, making your own components more reusable**.
62
62
63
63
As a general architectural principle, **we want to keep our own components "unaware" of Redux**. They should simply receive data and functions as props, just like any other React component. This ultimately makes it easier to test and reuse your own components.
64
64
@@ -67,33 +67,33 @@ As a general architectural principle, **we want to keep our own components "unaw
67
67
68
68
React is generally fast, but by default any updates to a component will cause React to re-render all of the components inside that part of the component tree. This does require work, and if the data for a given component hasn't changed, then re-rendering is likely some wasted effort because the requested UI output would be the same.
69
69
70
-
If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed. **React-Redux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to.**
70
+
If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed. **ReactRedux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to.**
71
71
72
72
In addition, by connecting multiple components in your React component tree, you can ensure that each connected component only extracts the specific pieces of data from the store state that are needed by that component. This means that your own component will need to re-render less often, because most of the time those specific pieces of data haven't changed.
73
73
74
74
75
75
### Community Support
76
76
77
-
As the official binding library for React and Redux, React-Redux has a large community of users. This makes it easier to ask for help, learn about best practices, use libraries that build on top of React-Redux, and reuse your knowledge across different applications.
77
+
As the official binding library for React and Redux, ReactRedux has a large community of users. This makes it easier to ask for help, learn about best practices, use libraries that build on top of ReactRedux, and reuse your knowledge across different applications.
78
78
79
79
80
80
81
81
## Links and References
82
82
83
83
84
-
### Understanding React-Redux
84
+
### Understanding ReactRedux
85
85
86
-
-[Idiomatic Redux: The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
86
+
-[Idiomatic Redux: The History and Implementation of ReactRedux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
Copy file name to clipboardExpand all lines: docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,8 +12,8 @@ As the second argument passed in to `connect`, `mapDispatchToProps` is used for
12
12
`dispatch` is a function of the Redux store. You call `store.dispatch` to dispatch an action.
13
13
This is the only way to trigger a state change.
14
14
15
-
With React-Redux, your components never access the store directly - `connect` does it for you.
16
-
React-Redux gives you two ways to let components dispatch actions:
15
+
With ReactRedux, your components never access the store directly - `connect` does it for you.
16
+
ReactRedux gives you two ways to let components dispatch actions:
17
17
18
18
- By default, a connected component receives `props.dispatch` and can dispatch actions itself.
19
19
-`connect` can accept an argument called `mapDispatchToProps`, which lets you create functions that dispatch when called, and pass those functions as props to your component.
This is what React-Redux’s `connect` does — it encapsulates the logic of talking to the Redux store and lets you not worry about it. And this is what you should totally make full use of in your implementation.
95
+
This is what ReactRedux’s `connect` does — it encapsulates the logic of talking to the Redux store and lets you not worry about it. And this is what you should totally make full use of in your implementation.
96
96
97
97
## Two Forms of `mapDispatchToProps`
98
98
@@ -281,7 +281,7 @@ Note that:
281
281
- Your component will no longer receive `dispatch` as a prop
It's an anti-pattern to interact with the store directly in a React component, whether it's an explicit import of the store or accessing it via context (see the [Redux FAQ entry on store setup](https://redux.js.org/faq/storesetup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself) for more details). Let React-Redux’s `connect` handle the access to the store, and use the `dispatch` it passes to the props to dispatch actions.
388
+
It's an anti-pattern to interact with the store directly in a React component, whether it's an explicit import of the store or accessing it via context (see the [Redux FAQ entry on store setup](https://redux.js.org/faq/storesetup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself) for more details). Let ReactRedux’s `connect` handle the access to the store, and use the `dispatch` it passes to the props to dispatch actions.
0 commit comments