swapped it back to react-redux

step2-06/demo/src/components/TodoFooter.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import { DefaultButton, Stack, Text } from 'office-ui-fabric-react';
 import { actions } from '../actions';
-import { useMappedState, useDispatch } from 'redux-react-hook';
+import { connect } from 'react-redux';
+import { Store } from '../store';
 
-export const TodoFooter = () => {
-  const { todos } = useMappedState(state => state);
-  const dispatch = useDispatch();
+interface TodoFooterProps {
+  todos: Store['todos'];
+  clear: () => void;
+}
+
+const TodoFooter = (props: TodoFooterProps) => {
+  const { todos, clear } = props;
 
   const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
 
@@ -14,7 +19,18 @@ export const TodoFooter = () => {
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
-      <DefaultButton onClick={() => dispatch(actions.clear())}>Clear Completed</DefaultButton>
+      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>
     </Stack>
   );
 };
+
+const ConnectedTodoFooter = connect(
+  (state: Store) => ({
+    todos: state.todos
+  }),
+  dispatch => ({
+    clear: () => dispatch(actions.clear())
+  })
+)(TodoFooter);
+
+export { ConnectedTodoFooter as TodoFooter };

step2-06/demo/src/components/TodoHeader.tsx

@@ -2,14 +2,19 @@ import React from 'react';
 import { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
 import { FilterTypes } from '../store';
 import { actions } from '../actions';
-import { StoreContext } from 'redux-react-hook';
+import { connect } from 'react-redux';
+
+interface TodoHeaderProps {
+  addTodo: (label: string) => void;
+  setFilter: (filter: FilterTypes) => void;
+}
 
 interface TodoHeaderState {
   labelInput: string;
 }
 
-export class TodoHeader extends React.Component<{}, TodoHeaderState> {
-  constructor(props: {}) {
+class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
+  constructor(props: TodoHeaderProps) {
     super(props);
     this.state = { labelInput: undefined };
   }
@@ -49,7 +54,7 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   }
 
   private onAdd = () => {
-    this.context.dispatch(actions.addTodo(this.state.labelInput));
+    this.props.addTodo(this.state.labelInput);
     this.setState({ labelInput: undefined });
   };
 
@@ -58,8 +63,16 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   };
 
   private onFilter = (item: PivotItem) => {
-    this.context.dispatch(actions.setFilter(item.props.headerText as FilterTypes));
+    this.props.setFilter(item.props.headerText as FilterTypes);
   };
 }
 
-TodoHeader.contextType = StoreContext;
+const ConnectedTodoHeader = connect(
+  state => {},
+  dispatch => ({
+    addTodo: label => dispatch(actions.addTodo(label)),
+    setFilter: filter => dispatch(actions.setFilter(filter))
+  })
+)(TodoHeader);
+
+export { ConnectedTodoHeader as TodoHeader };

step2-06/demo/src/components/TodoList.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import { Stack } from 'office-ui-fabric-react';
 import { TodoListItem } from './TodoListItem';
-import { useMappedState } from 'redux-react-hook';
+import { connect } from 'react-redux';
+import { Store } from '../store';
 
-export const TodoList = () => {
-  const { filter, todos } = useMappedState(state => state);
+interface TodoListProps {
+  todos: Store['todos'];
+  filter: Store['filter'];
+}
+
+const TodoList = (props: TodoListProps) => {
+  const { filter, todos } = props;
   const filteredTodos = Object.keys(todos).filter(id => {
     return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
   });
@@ -17,3 +23,6 @@ export const TodoList = () => {
     </Stack>
   );
 };
+
+const ConnectedTodoList = connect((state: Store) => ({ ...state }))(TodoList);
+export { ConnectedTodoList as TodoList };

step2-06/demo/src/components/TodoListItem.tsx

@@ -2,9 +2,15 @@ import React from 'react';
 import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
 import { actions } from '../actions';
 import { StoreContext } from 'redux-react-hook';
+import { Store } from '../store';
+import { connect } from 'react-redux';
 
 interface TodoListItemProps {
   id: string;
+  todos: Store['todos'];
+  complete: (id: string) => void;
+  remove: (id: string) => void;
+  edit: (id: string, label: string) => void;
 }
 
 interface TodoListItemState {
@@ -12,7 +18,7 @@ interface TodoListItemState {
   editLabel: string;
 }
 
-export class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
+class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
   constructor(props: TodoListItemProps) {
     super(props);
     this.state = { editing: false, editLabel: undefined };
@@ -75,4 +81,13 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
   };
 }
 
-TodoListItem.contextType = StoreContext;
+const ConnectedTodoListItem = connect(
+  (state: Store) => ({ todos: state.todos }),
+  dispatch => ({
+    complete: label => dispatch(actions.addTodo(label)),
+    remove: label => dispatch(actions.addTodo(label)),
+    edit: filter => dispatch(actions.setFilter(filter))
+  })
+)(TodoListItem);
+
+export { ConnectedTodoListItem as TodoListItem };

step2-06/demo/src/index.tsx

@@ -5,15 +5,15 @@ import { createStore } from 'redux';
 import { TodoApp } from './components/TodoApp';
 import { initializeIcons } from '@uifabric/icons';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { StoreContext } from 'redux-react-hook';
+import { Provider } from 'react-redux';
 
 const store = createStore(reducer, {}, composeWithDevTools());
 
 initializeIcons();
 
 ReactDOM.render(
-  <StoreContext.Provider value={store}>
+  <Provider store={store}>
     <TodoApp />
-  </StoreContext.Provider>,
+  </Provider>,
   document.getElementById('app')
 );