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
Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
51
51
52
-
```js title="app/store.js"
52
+
```ts title="app/store.js"
53
53
import { configureStore } from'@reduxjs/toolkit'
54
54
55
-
exportdefaultconfigureStore({
55
+
exportconst store =configureStore({
56
56
reducer: {},
57
57
})
58
+
59
+
// Infer the `RootState` and `AppDispatch` types from the store itself
This creates a Redux store, and also automatically configure the Redux DevTools extension so that you can inspect the store while developing.
@@ -63,13 +68,27 @@ This creates a Redux store, and also automatically configure the Redux DevTools
63
68
64
69
Once the store is created, we can make it available to our React components by putting a React-Redux `<Provider>` around our application in `src/index.js`. Import the Redux store we just created, put a `<Provider>` around your `<App>`, and pass the store as a prop:
65
70
66
-
```js title="index.js"
71
+
```tstitle="index.js"
72
+
// file: App.tsx noEmit
73
+
importReactfrom'react'
74
+
exportdefaultfunction App() {
75
+
return <div>...</div>
76
+
}
77
+
78
+
// file: app/store.ts noEmit
79
+
import { configureStore } from'@reduxjs/toolkit'
80
+
81
+
exportconst store =configureStore({
82
+
reducer: {},
83
+
})
84
+
85
+
// file: index.tsx
67
86
importReactfrom'react'
68
87
importReactDOMfrom'react-dom'
69
88
import'./index.css'
70
89
importAppfrom'./App'
71
90
// highlight-start
72
-
importstorefrom'./app/store'
91
+
import{ store }from'./app/store'
73
92
import { Provider } from'react-redux'
74
93
// highlight-end
75
94
@@ -90,14 +109,20 @@ Creating a slice requires a string name to identify the slice, an initial state
90
109
91
110
Redux requires that [we write all state updates immutably, by making copies of data and updating the copies](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#immutability). However, Redux Toolkit's `createSlice` and `createReducer` APIs use [Immer](https://immerjs.github.io/immer/) inside to allow us to [write "mutating" update logic that becomes correct immutable updates](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer).
Next, we need to import the reducer function from the counter slice and add it to our store. By defining a field inside the `reducers` parameter, we tell the store to use this slice reducer function to handle all updates to that state.
Now we can use the React-Redux hooks to let React components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/Counter.js` file with a `<Counter>` component inside, then import that component into `App.js` and render it inside of `<App>`.
0 commit comments