diff --git a/client/modules/IDE/components/ConsoleInput.jsx b/client/modules/IDE/components/ConsoleInput.jsx
index c026d29d4b..daac76839c 100644
--- a/client/modules/IDE/components/ConsoleInput.jsx
+++ b/client/modules/IDE/components/ConsoleInput.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import CodeMirror from 'codemirror';
 import { Encode } from 'console-feed';
 
@@ -15,6 +16,7 @@ function ConsoleInput({ theme, fontSize }) {
   const [commandCursor, setCommandCursor] = useState(-1);
   const codemirrorContainer = useRef(null);
   const cmInstance = useRef(null);
+  const dispatch = useDispatch();
 
   useEffect(() => {
     cmInstance.current = CodeMirror(codemirrorContainer.current, {
@@ -45,7 +47,7 @@ function ConsoleInput({ theme, fontSize }) {
           payload: { source: 'console', messages }
         });
 
-        dispatchConsoleEvent(consoleEvent);
+        dispatch(dispatchConsoleEvent(consoleEvent));
         cm.setValue('');
         setCommandHistory([value, ...commandHistory]);
         setCommandCursor(-1);
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index e589fb3cff..cd6caa3255 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -1,43 +1,17 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
+import parseFileName from '../utils/parseFileName';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
 import FileTypeIcon from './FileTypeIcon';
 
-function parseFileName(name) {
-  const nameArray = name.split('.');
-  if (nameArray.length > 1) {
-    const extension = `.${nameArray[nameArray.length - 1]}`;
-    const baseName = nameArray.slice(0, -1).join('.');
-    const firstLetter = baseName[0];
-    const lastLetter = baseName[baseName.length - 1];
-    const middleText = baseName.slice(1, -1);
-    return {
-      baseName,
-      firstLetter,
-      lastLetter,
-      middleText,
-      extension
-    };
-  }
-  const firstLetter = name[0];
-  const lastLetter = name[name.length - 1];
-  const middleText = name.slice(1, -1);
-  return {
-    baseName: name,
-    firstLetter,
-    lastLetter,
-    middleText
-  };
-}
-
 function FileName({ name }) {
   const {
     baseName,
@@ -62,40 +36,35 @@ FileName.propTypes = {
   name: PropTypes.string.isRequired
 };
 
-const FileNode = ({
-  id,
-  parentId,
-  children,
-  name,
-  fileType,
-  isSelectedFile,
-  isFolderClosed,
-  setSelectedFile,
-  deleteFile,
-  updateFileName,
-  resetSelectedFile,
-  newFile,
-  newFolder,
-  showFolderChildren,
-  hideFolderChildren,
-  canEdit,
-  openUploadFileModal,
-  authenticated,
-  onClickFile
-}) => {
+const FileNode = ({ id, canEdit, onClickFile }) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  const fileNode =
+    useSelector((state) => state.files.find((file) => file.id === id)) || {};
+  const authenticated = useSelector((state) => state.user.authenticated);
+
+  const {
+    name = '',
+    parentId = null,
+    children = [],
+    fileType = 'file',
+    isSelectedFile = false,
+    isFolderClosed = false
+  } = fileNode;
+
   const [isOptionsOpen, setIsOptionsOpen] = useState(false);
   const [isEditingName, setIsEditingName] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [updatedName, setUpdatedName] = useState(name);
 
-  const { t } = useTranslation();
   const fileNameInput = useRef(null);
   const fileOptionsRef = useRef(null);
 
   const handleFileClick = (event) => {
     event.stopPropagation();
     if (name !== 'root' && !isDeleting) {
-      setSelectedFile(id);
+      dispatch(IDEActions.setSelectedFile(id));
     }
     if (onClickFile) {
       onClickFile();
@@ -122,17 +91,17 @@ const FileNode = ({
   };
 
   const handleClickAddFile = () => {
-    newFile(id);
+    dispatch(IDEActions.newFile(id));
     setTimeout(() => hideFileOptions(), 0);
   };
 
   const handleClickAddFolder = () => {
-    newFolder(id);
+    dispatch(IDEActions.newFolder(id));
     setTimeout(() => hideFileOptions(), 0);
   };
 
   const handleClickUploadFile = () => {
-    openUploadFileModal(id);
+    dispatch(IDEActions.openUploadFileModal(id));
     setTimeout(hideFileOptions, 0);
   };
 
@@ -141,8 +110,8 @@ const FileNode = ({
 
     if (window.confirm(prompt)) {
       setIsDeleting(true);
-      resetSelectedFile(id);
-      setTimeout(() => deleteFile(id, parentId), 100);
+      dispatch(IDEActions.resetSelectedFile(id));
+      setTimeout(() => dispatch(FileActions.deleteFile(id, parentId), 100));
     }
   };
 
@@ -158,7 +127,7 @@ const FileNode = ({
 
   const saveUpdatedFileName = () => {
     if (updatedName !== name) {
-      updateFileName(id, updatedName);
+      dispatch(FileActions.updateFileName(id, updatedName));
     }
   };
 
@@ -243,7 +212,7 @@ const FileNode = ({
             <div className="sidebar__file-item--folder">
               <button
                 className="sidebar__file-item-closed"
-                onClick={() => showFolderChildren(id)}
+                onClick={() => dispatch(FileActions.showFolderChildren(id))}
                 aria-label={t('FileNode.OpenFolderARIA')}
                 title={t('FileNode.OpenFolderARIA')}
               >
@@ -255,7 +224,7 @@ const FileNode = ({
               </button>
               <button
                 className="sidebar__file-item-open"
-                onClick={() => hideFolderChildren(id)}
+                onClick={() => dispatch(FileActions.hideFolderChildren(id))}
                 aria-label={t('FileNode.CloseFolderARIA')}
                 title={t('FileNode.CloseFolderARIA')}
               >
@@ -353,7 +322,7 @@ const FileNode = ({
         <ul className="file-item__children">
           {children.map((childId) => (
             <li key={childId}>
-              <ConnectedFileNode
+              <FileNode
                 id={childId}
                 parentId={id}
                 canEdit={canEdit}
@@ -369,50 +338,12 @@ const FileNode = ({
 
 FileNode.propTypes = {
   id: PropTypes.string.isRequired,
-  parentId: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
-  name: PropTypes.string.isRequired,
-  fileType: PropTypes.string.isRequired,
-  isSelectedFile: PropTypes.bool,
-  isFolderClosed: PropTypes.bool,
-  setSelectedFile: PropTypes.func.isRequired,
-  deleteFile: PropTypes.func.isRequired,
-  updateFileName: PropTypes.func.isRequired,
-  resetSelectedFile: PropTypes.func.isRequired,
-  newFile: PropTypes.func.isRequired,
-  newFolder: PropTypes.func.isRequired,
-  showFolderChildren: PropTypes.func.isRequired,
-  hideFolderChildren: PropTypes.func.isRequired,
   canEdit: PropTypes.bool.isRequired,
-  openUploadFileModal: PropTypes.func.isRequired,
-  authenticated: PropTypes.bool.isRequired,
   onClickFile: PropTypes.func
 };
 
 FileNode.defaultProps = {
-  onClickFile: null,
-  parentId: '0',
-  isSelectedFile: false,
-  isFolderClosed: false
+  onClickFile: null
 };
 
-function mapStateToProps(state, ownProps) {
-  // this is a hack, state is updated before ownProps
-  const fileNode = state.files.find((file) => file.id === ownProps.id) || {
-    name: 'test',
-    fileType: 'file'
-  };
-  return Object.assign({}, fileNode, {
-    authenticated: state.user.authenticated
-  });
-}
-
-const mapDispatchToProps = { ...FileActions, ...IDEActions };
-
-const ConnectedFileNode = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FileNode);
-
-export { FileNode };
-export default ConnectedFileNode;
+export default FileNode;
diff --git a/client/modules/IDE/components/FileNode.unit.test.jsx b/client/modules/IDE/components/FileNode.unit.test.jsx
index 8676a817d8..4f75d9a272 100644
--- a/client/modules/IDE/components/FileNode.unit.test.jsx
+++ b/client/modules/IDE/components/FileNode.unit.test.jsx
@@ -1,4 +1,8 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import { useDispatch } from 'react-redux';
+import * as FileActions from '../actions/files';
 
 import {
   fireEvent,
@@ -7,9 +11,27 @@ import {
   waitFor,
   within
 } from '../../../test-utils';
-import { FileNode } from './FileNode';
+import FileNode from './FileNode';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn()
+}));
+
+jest.mock('../actions/files', () => ({
+  updateFileName: jest.fn()
+}));
+
+const mockStore = configureStore([]);
 
 describe('<FileNode />', () => {
+  const mockDispatch = jest.fn();
+
+  beforeEach(() => {
+    useDispatch.mockReturnValue(mockDispatch);
+    jest.clearAllMocks();
+  });
+
   const changeName = (newFileName) => {
     const renameButton = screen.getByText(/Rename/i);
     fireEvent.click(renameButton);
@@ -24,62 +46,64 @@ describe('<FileNode />', () => {
     await waitFor(() => within(name).queryByText(expectedName));
   };
 
-  const renderFileNode = (fileType, extraProps = {}) => {
-    const props = {
-      ...extraProps,
-      id: '0',
-      name: fileType === 'folder' ? 'afolder' : 'test.jsx',
-      fileType,
-      canEdit: true,
-      children: [],
-      authenticated: false,
-      setSelectedFile: jest.fn(),
-      deleteFile: jest.fn(),
-      updateFileName: jest.fn(),
-      resetSelectedFile: jest.fn(),
-      newFile: jest.fn(),
-      newFolder: jest.fn(),
-      showFolderChildren: jest.fn(),
-      hideFolderChildren: jest.fn(),
-      openUploadFileModal: jest.fn(),
-      setProjectName: jest.fn()
+  const renderFileNode = (fileType, extraState = {}) => {
+    const initialState = {
+      files: [
+        {
+          id: '0',
+          name: fileType === 'folder' ? 'afolder' : 'test.jsx',
+          fileType,
+          parentId: 'root',
+          children: [],
+          isSelectedFile: false,
+          isFolderClosed: false
+        }
+      ],
+      user: { authenticated: false },
+      ...extraState
     };
 
-    render(<FileNode {...props} />);
+    const store = mockStore(initialState);
 
-    return props;
+    render(
+      <Provider store={store}>
+        <FileNode id="0" canEdit />
+      </Provider>
+    );
+
+    return { store };
   };
 
   describe('fileType: file', () => {
     it('cannot change to an empty name', async () => {
-      const props = renderFileNode('file');
+      renderFileNode('file');
 
       changeName('');
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
-      await expectFileNameToBe(props.name);
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
+      await expectFileNameToBe('test.jsx');
     });
 
     it('can change to a valid filename', async () => {
       const newName = 'newname.jsx';
-      const props = renderFileNode('file');
+      renderFileNode('file');
 
       changeName(newName);
 
       await waitFor(() =>
-        expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
+        expect(FileActions.updateFileName).toHaveBeenCalledWith('0', newName)
       );
       await expectFileNameToBe(newName);
     });
 
     it('must have an extension', async () => {
       const newName = 'newname';
-      const props = renderFileNode('file');
+      renderFileNode('file');
 
       changeName(newName);
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
-      await expectFileNameToBe(props.name);
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
+      await expectFileNameToBe('test.jsx');
     });
 
     it('can change to a different extension', async () => {
@@ -87,58 +111,58 @@ describe('<FileNode />', () => {
       window.confirm = mockConfirm;
 
       const newName = 'newname.gif';
-      const props = renderFileNode('file');
+      renderFileNode('file');
 
       changeName(newName);
 
       expect(mockConfirm).toHaveBeenCalled();
       await waitFor(() =>
-        expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
+        expect(FileActions.updateFileName).toHaveBeenCalledWith('0', newName)
       );
-      await expectFileNameToBe(props.name);
+      await expectFileNameToBe(newName);
     });
 
     it('cannot be just an extension', async () => {
       const newName = '.jsx';
-      const props = renderFileNode('file');
+      renderFileNode('file');
 
       changeName(newName);
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
-      await expectFileNameToBe(props.name);
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
+      await expectFileNameToBe('test.jsx');
     });
   });
 
   describe('fileType: folder', () => {
     it('cannot change to an empty name', async () => {
-      const props = renderFileNode('folder');
+      renderFileNode('folder');
 
       changeName('');
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
-      await expectFileNameToBe(props.name);
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
+      await expectFileNameToBe('afolder');
     });
 
     it('can change to another name', async () => {
       const newName = 'foldername';
-      const props = renderFileNode('folder');
+      renderFileNode('folder');
 
       changeName(newName);
 
       await waitFor(() =>
-        expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
+        expect(FileActions.updateFileName).toHaveBeenCalledWith('0', newName)
       );
       await expectFileNameToBe(newName);
     });
 
     it('cannot have a file extension', async () => {
       const newName = 'foldername.jsx';
-      const props = renderFileNode('folder');
+      renderFileNode('folder');
 
       changeName(newName);
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
-      await expectFileNameToBe(props.name);
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
+      await expectFileNameToBe('afolder');
     });
   });
 });
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 79ffed3b86..20f0104caf 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -13,7 +13,7 @@ import {
 import { selectRootFile } from '../selectors/files';
 import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
 
-import ConnectedFileNode from './FileNode';
+import FileNode from './FileNode';
 import { PlusIcon } from '../../../common/icons';
 import { FileDrawer } from './Editor/MobileEditor';
 
@@ -130,7 +130,7 @@ export default function SideBar() {
             </ul>
           </div>
         </header>
-        <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
+        <FileNode id={rootFile.id} canEdit={canEditProject} />
       </section>
     </FileDrawer>
   );
diff --git a/client/modules/IDE/utils/parseFileName.js b/client/modules/IDE/utils/parseFileName.js
new file mode 100644
index 0000000000..1bde7be0f6
--- /dev/null
+++ b/client/modules/IDE/utils/parseFileName.js
@@ -0,0 +1,28 @@
+function parseFileName(name) {
+  const nameArray = name.split('.');
+  if (nameArray.length > 1) {
+    const extension = `.${nameArray[nameArray.length - 1]}`;
+    const baseName = nameArray.slice(0, -1).join('.');
+    const firstLetter = baseName[0];
+    const lastLetter = baseName[baseName.length - 1];
+    const middleText = baseName.slice(1, -1);
+    return {
+      baseName,
+      firstLetter,
+      lastLetter,
+      middleText,
+      extension
+    };
+  }
+  const firstLetter = name[0];
+  const lastLetter = name[name.length - 1];
+  const middleText = name.slice(1, -1);
+  return {
+    baseName: name,
+    firstLetter,
+    lastLetter,
+    middleText
+  };
+}
+
+export default parseFileName;