Add Redux #18
Add Redux #18
Conversation
|
Awesome! |
alexandersmanning
force-pushed
the
amanning/add-redux
branch
2 times, most recently
from
cf33441 to
a492d30
Compare
| @@ -0,0 +1,17 @@ | |||
| const localStorageMock = { | |||
There was a problem hiding this comment.
Since the initial state calls local storage, and the utils file needs a dispatcher, this sadly forces Jest to call local storage which does not exist. This mock is put in place to fix it.
alexandersmanning
force-pushed
the
amanning/add-redux
branch
from
a492d30 to
a7edbc5
Compare
| @@ -36,7 +38,7 @@ async function newBook(dispatch) { | |||
| } else { | |||
| const book = res.payload; | |||
| console.log("new book", book); | |||
| dispatch({ type: "ADD_BOOK", payload: book }); | |||
| dispatch(librarySlice.actions.addBook(book)); | |||
There was a problem hiding this comment.
If you look at the quick start we can make this even easier:
https://redux-toolkit.js.org/tutorials/quick-start
by doing something like: export const { increment, decrement, incrementByAmount } = librarySlice.actions
The problem is we have A LOT of actions. I think this is something we can reevaluate and clean up later
| import { localStorageOrDefault } from "../utils"; | ||
|
|
||
| // @ts-ignore | ||
| const { createSlice } = toolkitRaw.default ?? toolkitRaw; |
There was a problem hiding this comment.
So this piece is a bug with redux dealing with how ESM modules work in node. This has been fixed in v2.0.0, however that is still in alpha.
This is the work around for the time being:
reduxjs/redux-toolkit#1960
| @@ -44,6 +44,8 @@ export type EditorState = { | |||
| _cachedSelectedText?: SelectedText; | |||
| _pushTextToEditor?: string; | |||
|
|
|||
| _pushContentToEditor?: string; | |||
There was a problem hiding this comment.
This is the only major change that you should find in the librarySlice file.
Right now you are saving the full quill object to the store, but you should never store non-serializable objects to a store. While this does not really affect us (you don't want to do this due to server side rendering and hydration), it is smart to follow the correct patterns.
I have modified the content to use this instead.
This adds redux to the app, replace our own built in state module. I have manually tested a number of things and have ensured the current test work. With that said, I recommend you verify this too.
This is all following the quick start guide: https://redux-toolkit.js.org/tutorials/quick-start
Why redux:
Given that we are using immer and a single reducer, Redux provides us the same functionality, but with significantly better dev tools to watch state.
In the longterm, we should start using middleware to perform requests, which will help simplify the flow significantly, and allow us to better track where and when requests are being made. One of the cool things about Redux Tool Kit (which is what I am using) is that it provides something calls RTKQuery. This will allow us to handle loading states and such for requests a lot easier, and not have to create different actions to do so.
The app with Redux Dev Tools: