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
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
+
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.
12
12
13
13
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.
14
14
15
-
**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.
15
+
**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.
16
16
17
17
To understand why you should use React-Redux, it may help to understand what a "UI binding library" does.
18
18
@@ -23,76 +23,67 @@ To understand why you should use React-Redux, it may help to understand what a "
23
23
> -[You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)
24
24
> -[Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/)
25
25
26
-
27
26
## Integrating Redux with a UI
28
27
29
28
Using Redux with _any_ UI layer requires [the same consistent set of steps](https://blog.isquaredsoftware.com/presentations/workshops/redux-fundamentals/ui-layer.html#/4):
30
29
31
30
1. Create a Redux store
32
31
2. Subscribe to updates
33
32
3. Inside the subscription callback:
34
-
1. Get the current store state
35
-
2. Extract the data needed by this piece of UI
36
-
3. Update the UI with the data
33
+
1. Get the current store state
34
+
2. Extract the data needed by this piece of UI
35
+
3. Update the UI with the data
37
36
4. If necessary, render the UI with initial state
38
37
5. Respond to UI inputs by dispatching Redux actions
39
38
40
-
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.
41
-
42
-
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.**
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.
43
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.**
44
42
45
43
## Reasons to Use React-Redux
46
44
47
45
### It is the Official Redux UI Bindings for React
48
46
49
-
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
-
51
-
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.
47
+
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.
52
48
49
+
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.
53
50
54
51
### It Encourages Good React Architecture
55
52
56
-
React components are a lot like functions. While it's possible to write all your code in a single function, it's usually better to split that logic into smaller functions that each handle a specific task, making them easier to understand.
53
+
React components are a lot like functions. While it's possible to write all your code in a single function, it's usually better to split that logic into smaller functions that each handle a specific task, making them easier to understand.
57
54
58
-
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.
55
+
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.
59
56
60
-
**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
-
62
-
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.
57
+
**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**.
63
58
59
+
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
60
65
61
### It Implements Performance Optimizations For You
66
62
67
-
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.
68
-
69
-
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.**
63
+
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.
70
64
71
-
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.
65
+
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.**
72
66
67
+
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
68
74
69
### Community Support
75
70
76
-
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
-
78
-
71
+
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.
79
72
80
73
## Links and References
81
74
82
-
83
75
### Understanding React-Redux
84
76
85
77
-[Idiomatic Redux: The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
0 commit comments