bjoluc/next-redux-cookie-wrapper

Small question

VictorPulzz opened this issue · 8 comments

Hello!
Can you help me with some problem?
How I can implement several redux persist for different object in store.
For example:
I have this tree structure:

store: {
     user: {
        token: ... ,
        name: ...
     },
     global: {
        theme: ....
     }
}

I want split on module, and in every module set:
global module: image
user module:
image
Can you help me, or share example (without react-toolkit)
Many thanks!:)

Also, could you show how to connect several middlewares?

image

How I can implement several redux persist for different object in store.

You mean how can you persist several subtrees of your state? With Redux Persist or with next-redux-cookie-wrapper?
With Redux Persist, your setup looks just fine – you simply persist the reducers individually.
With next-redux-cookie-wrapper, you do not configure persistence on a reducer level, but globally. That is, you would use

{ subtrees: ["user.userData"] }

to configure the middleware according to your "user module" screenshot. Does that answer your question?

Also, could you show how to connect several middlewares?

The Redux docs are your friend: https://redux.js.org/api/applymiddleware

@bjoluc Thank you for answers!
Yesterday I carefully studied everything and I managed to connect your library, thank you very much for your work! :D

I only have one last question left:
1 - I have connected your library and configured it. Now I store data in a cookie that needs to be transmitted to the server (admit a token) (I also connected Redux-Persist to store data in local storage that is not needed at the SSR level)

image

2 - Then I save the user's token in a cookie, but after the page has been rendered, it didn't sync with the Store until I used in any component method - getServerSideProps.
Correctly, I understand, it works like this - First, you check isServer, if this is the server your lib calls dispatch with data from the cookie (SSR), and I need to process them using the method: HYDRATE (where it need).
image

Sorry for the big questions, I just want to clarify! xD

You're right about the HYDRATE action on the server. However, you should not need to modify the HYDRATE reducer specifically for next-redux-cookie-wrapper, since HYDRATE is used on the server and the client anyway (https://github.com/kirill-konshin/next-redux-wrapper#how-it-works).
Consider using the debug option of next-redux-wrapper and maybe logging the payload of the HYDRATE action to the console. If a cookie is present for user.token, the state should be contained in the first HYDRATE action on the server – unless you are using getStaticProps, of course.


Offtopic:
There are a few obsolete spreads in your code – maybe check your applyMiddleware() call and the HYDRATE reducer. You can also spread undefined! Plus: You could get rid of large portions of your code using configureStore from redux-toolkit!

Thanks!
Yea, I already thought about React toolkit)
About HYDRATE, I don't know why, but my HYDRATEis called only when I use getServerSideProps somewhere, if I don't have getServerSideProps (in any component), then HYDRATE is not called when the application is first loaded) :)

if I don't have getServerSideProps (in any component), then HYDRATE is not called when the application is first loaded) :)

I think that makes sense, given that next-redux-cookie-wrapper can only read cookies in "Phase 1" which seems to be skipped if no getServerSideProps function is present.

Thanks you very much!

You're welcome!