Port ExportProject to use redux-toolkit; Remove redux from CreateProject

[imnasnainaec]

Parts of #1953

---

This change is 

[codecov-commenter]

Codecov Report

Attention: 27 lines in your changes are missing coverage. Please review.

Files	Coverage Δ
src/components/App/DefaultState.ts	100.00% <ø> (ø)
src/rootReducer.ts	100.00% <ø> (ø)
...onents/ProjectExport/Redux/ExportProjectActions.ts	93.33% <80.00%> (+93.33%)	⬆️
...onents/ProjectExport/Redux/ExportProjectReducer.ts	83.33% <83.33%> (+23.33%)	⬆️
src/components/ProjectScreen/CreateProject.tsx	67.04% <28.57%> (ø)
...c/components/ProjectScreen/CreateProjectActions.ts	0.00% <0.00%> (ø)

... and 2 files with indirect coverage changes

📢 Thoughts on this report? Let us know!.

[jmgrady]

Reviewed 4 of 11 files at r1, 11 of 11 files at r2, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @imnasnainaec)

---

src/components/ProjectExport/Redux/ExportProjectActions.ts line 21 at r2 (raw file):

export function downloading(projectId: string): PayloadAction {
  return downloadingAction(projectId);
}

Since these names are inherited I am fine with leaving them but exporting and downloading do not sound like actions - they describe the current status of the project. Better names might be exportProject and downloadProject. Your call - you work with these more than I.

Suggestion:

export function exporting(projectId: string): PayloadAction {
  return exportingAction(projectId);
}

export function downloading(projectId: string): PayloadAction {
  return downloadingAction(projectId);
}`

---

src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx line 1 at r2 (raw file):

import configureMockStore from "redux-mock-store";

I think a better test is to use the actual redux store and verify that the state changes. This verifies that the correct action is dispatched by the dispatch methods but if you use the actual store, you can also test the action and reducer code at the same time.

You can use setupStore() from store to create the redux store. Since you don't need to have preset values (none of the reducers depend on the current state) you won't need to create a preloaded state. Even that is not difficult - you can see an example in src/goals/MergeDuplicates/Redux/tests/MergeDupsReducer.test.tsx.

Code quote:

import configureMockStore from "redux-mock-store";

[imnasnainaec]

Reviewable status: 13 of 15 files reviewed, all discussions resolved (waiting on @jmgrady)

---

src/components/ProjectExport/Redux/ExportProjectActions.ts line 21 at r2 (raw file):

Previously, jmgrady (Jim Grady) wrote…

Since these names are inherited I am fine with leaving them but exporting and downloading do not sound like actions - they describe the current status of the project. Better names might be exportProject and downloadProject. Your call - you work with these more than I.

The action is only to update the status to "exporting" or "downloading".

---

src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx line 1 at r2 (raw file):

Previously, jmgrady (Jim Grady) wrote…

I think a better test is to use the actual redux store and verify that the state changes. This verifies that the correct action is dispatched by the dispatch methods but if you use the actual store, you can also test the action and reducer code at the same time.

You can use setupStore() from store to create the redux store. Since you don't need to have preset values (none of the reducers depend on the current state) you won't need to create a preloaded state. Even that is not difficult - you can see an example in src/goals/MergeDuplicates/Redux/tests/MergeDupsReducer.test.tsx.

Good idea. Done.

[jmgrady]

Reviewed 2 of 2 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @imnasnainaec)

---

src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx line 33 at r3 (raw file):

      const mockStore = setupStore();
      mockDownloadList.mockResolvedValueOnce({});
      await mockStore.dispatch<any>(asyncDownloadExport(mockProjId));

Since you are using a store with the actual type, you don't need to use <any> with the dispatch functions, i.e. can be changed to:

await mockStore.dispatch(asyncDownloadExport(mockProjId));

(and probably should be).

[imnasnainaec]

Reviewable status: 14 of 15 files reviewed, 1 unresolved discussion (waiting on @jmgrady)

---

src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx line 33 at r3 (raw file):

Previously, jmgrady (Jim Grady) wrote…

Since you are using a store with the actual type, you don't need to use <any> with the dispatch functions, i.e. can be changed to:

await mockStore.dispatch(asyncDownloadExport(mockProjId));

(and probably should be).

Done.

[jmgrady]

Reviewed 1 of 1 files at r4, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @imnasnainaec)