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
[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://react.dev/) 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.
11
+
[Angular Redux](https://github.com/reduxjs/angular-redux) is the official [Angular](https://angular.dev/) UI bindings layer for [Redux](https://redux.js.org/). It lets your Angular components read data from a Redux store, and dispatch actions to the store to update state.
17
12
18
13
## Installation
19
14
20
-
React Redux 8.x requires **React 16.8.3 or later** / **React Native 0.59 or later**, in order to make use of React Hooks.
15
+
Angular Redux 8.x requires **Angular 17.3 or later**, in order to make use of Angular Signals.
21
16
22
-
### Create a React Redux App
17
+
### Installing with `ng add`
23
18
24
-
The recommended way to start new apps with React and Redux is by using [our official Redux+TS template for Vite](https://github.com/reduxjs/redux-templates), or by creating a new Next.js project using [Next's `with-redux` template](https://github.com/vercel/next.js/tree/canary/examples/with-redux).
19
+
You can install the Store to your project with the following `ng add` command <ahref="https://angular.dev/cli/add"target="_blank">(details here)</a>:
25
20
26
-
Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
21
+
```sh
22
+
ng add @reduxjs/angular-redux@latest
23
+
```
27
24
28
-
```bash
29
-
# Vite with our Redux+TS template
30
-
# (using the `degit` tool to clone and extract the template)
|`--path`| Path to the module that you wish to add the import for the `provideRedux` to. |`string`||
30
+
|`--project`| Name of the project defined in your `angular.json` to help locating the module to add the `provideRedux` to. |`string`||
31
+
|`--module`| Name of file containing the module that you wish to add the import for the `provideRedux` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`. |`string`|`app`|
32
+
|`--storePath`| The file path to create the state in. |`string`|`store`|
36
33
37
-
We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
1. Update `package.json` > `dependencies` with Redux, Redux Toolkit, and Angular Redux
37
+
2. Run `npm install` to install those dependencies.
38
+
3. Update your `src/app/app.module.ts` > `imports` array with `provideRedux({store})`
39
+
4. If the project is using a `standalone bootstrap`, it adds `provideRedux({store})` into the application config.
41
40
42
-
### An Existing React App
41
+
### Installing with `npm` or `yarn`
43
42
44
-
To use React Redux with your React app, install it as a dependency:
43
+
To use Angular Redux with your Angular app, install it as a dependency:
45
44
46
45
```bash
47
46
# If you use npm:
48
-
npm install react-redux
47
+
npm install @reduxjs/angular-redux
49
48
50
49
# Or if you use Yarn:
51
-
yarn add react-redux
50
+
yarn add @reduxjs/angular-redux
52
51
```
53
52
53
+
54
54
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.
55
55
56
-
React-Redux v8 is written in TypeScript, so all types are automatically included.
56
+
Angular-Redux is written in TypeScript, so all types are automatically included.
57
57
58
58
## API Overview
59
59
60
-
### `Provider`
61
-
62
-
React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app:
63
-
64
-
```jsx
65
-
importReactfrom'react'
66
-
importReactDOMfrom'react-dom/client'
60
+
### `provideRedux`
67
61
68
-
import { Provider } from'react-redux'
69
-
importstorefrom'./store'
62
+
Angular Redux includes a `provideRedux` provider factory, which makes the Redux store available to the rest of your app:
React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.
85
-
86
-
`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.
Angular Redux provides a pair of custom Angular injectable functions that allow your Angular components to interact with the Redux store.
80
+
81
+
`injectSelector` reads a value from the store state and subscribes to updates, while `injectDispatch` returns the store's `dispatch` method to let you dispatch actions.
Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
134
-
135
-
See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
136
-
137
-
<LiteYouTubeEmbed
138
-
id="9zySeP5vH9c"
139
-
title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
140
-
/>
141
-
142
110
## Help and Discussion
143
111
144
112
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!
145
113
146
114
You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
0 commit comments