diff --git a/website/docs/docs/recipes/usage-with-react-redux.md b/website/docs/docs/recipes/usage-with-react-redux.md
index 9a678e320..edcf33379 100644
--- a/website/docs/docs/recipes/usage-with-react-redux.md
+++ b/website/docs/docs/recipes/usage-with-react-redux.md
@@ -5,7 +5,7 @@ As Easy Peasy outputs a standard Redux store, so it is entirely possible to use
This allows you to do a few things:
- Slowly migrate a legacy application that is built using `react-redux`
-- Connect your store to Class components via `connect`
+- Connect your store to Class components via `useDispatch and useSelectors`
**1. First, install the `react-redux` package**
@@ -36,27 +36,25 @@ const App = () => (
render(, document.querySelector('#app'));
```
-**3. Finally, use `connect` against your components**
+**3. Finally, use `useSelector` and `useDispatch` against your components**
```javascript
-import React, { Component } from 'react';
-import { connect } from 'react-redux'; // 👈 import the connect
+import React from 'react';
+import { useSelector, useStoreActions } from "./model"; // 👈 For connecting the store with the components and dispatching actions
-function TodoList({ todos, addTodo }) {
+const TodoList = ({ todos, addTodo }) => {
+ const todos = useSelector(state => state.todos.items);
+ const addTodo = useStoreActions(dispatch => dispatch.todos.addTodo);
+
return (
- {todos.map(({ id, text }) => (
+ {todos.map(({ id, text }) =>
- ))}
+ )}
);
}
-export default connect(
- // 👇 Map to your required state
- (state) => ({ todos: state.todos.items }),
- // 👇 Map your required actions
- (dispatch) => ({ addTodo: dispatch.todos.addTodo }),
-)(TodoList);
+export default TodoList;
```