Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor state mgmt #1326

Draft
wants to merge 14 commits into
base: master
Choose a base branch
from
Draft

Refactor state mgmt #1326

wants to merge 14 commits into from

Conversation

HerveH44
Copy link
Contributor

Linked tickets

Explanation of the issue

The state management is a big mess and we should adopt a simpler and more maintainable way of handling frontend app state

Description of your changes

I'm starting small to allow incremental changes. I just introduced Redux store capability and connect the store to StartPanel controls.
I added migration capability to make it invisible to the user that the data is being migrated to the new store.

Screenshots

@HerveH44 HerveH44 temporarily deployed to beta-dr4ft-refactor-sta-odtmjl December 10, 2020 15:32 Inactive
@HerveH44 HerveH44 temporarily deployed to beta-dr4ft-refactor-sta-25fxmd December 10, 2020 15:34 Inactive
@HerveH44 HerveH44 temporarily deployed to beta-dr4ft-refactor-sta-lgoocq December 10, 2020 15:41 Inactive
@HerveH44 HerveH44 temporarily deployed to beta-dr4ft-refactor-sta-xoacbh December 10, 2020 15:46 Inactive
@HerveH44 HerveH44 temporarily deployed to beta-dr4ft-refactor-sta-jqo2bp December 10, 2020 15:51 Inactive
@HerveH44 HerveH44 had a problem deploying to beta-dr4ft-refactor-sta-qnxjli December 10, 2020 15:51 Failure
@HerveH44 HerveH44 temporarily deployed to beta-dr4ft-refactor-sta-qnxjli December 10, 2020 16:10 Inactive
@ZeldaZach
Copy link
Member

Any reason the beta deployments failed?

Copy link
Member

@ZeldaZach ZeldaZach left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally on multiple browsers and accounts, saw no issue. I agree with moving things to more concrete classes instead of spewed across the code base. Thanks as always :)

@HerveH44
Copy link
Contributor Author

@ZeldaZach I don't know if you noticed but this is just a first step. Not all the data is being handled by redux stores.

@HerveH44
Copy link
Contributor Author

Actually, I just read : https://dev.to/selbekk/persisting-your-react-state-in-9-lines-of-code-9go

I need to think about it a bit, because we may not need actual global state, I need to check again but if we can get along with just local state + persistance we could just be happier. @ZeldaZach I don't know who could have an expert POV on this subject, if you know someone let me know.

@ZeldaZach
Copy link
Member

cc @lrawicz

@mixmix
Copy link
Member

mixmix commented Jan 5, 2021

@HerveH44 I'm keen on redux. In particular being able to write tests around certain bits of logic (like what should happen when you burn a card you've previously picked?)

ITO using local storage and hooks isn't that just global state but somewhere else and harder to test?

Very excited to see this as part of the app, I think it will make unbeatable the so and contributing a lot easier. Happy to help out with this where possible

@HerveH44
Copy link
Contributor Author

HerveH44 commented Jan 8, 2021

@mixmix thanks, I'll be glad to share thoughts on Redux. I've never put frontend under test, so I would love to know more about it. This PR intent is to be super small and just starts the migration to Redux. I already started with another part of state but it requires a lot of changes.

@ZeldaZach @mixmix if you think this is fine, we can merge this part and move towards another part of state refactor

Copy link
Member

@mixmix mixmix left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are modules I've not used here but the code looks reasonable.

I left a few minor comments. My major request before merging would be a single test (as a example for those later) for a reducer.

This is gonna be a great improvement!

@@ -0,0 +1,31 @@
const readAndDeleteFromLocalStorage = (key, defaultValue) => {
const val = localStorage[key];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should probably use localStorage.setItem

getItem and removeItem?

I guess that protects against accidentally mutating wrong things on the raw object?

}
}
}
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These reducers are what we could easily write tests over. Haven't seen this createSlice thing before but we just need a way to reach in and check those reduce functions. These ones are simple, but would be good to get into habit of putting tests over ones which have multiple paths over them.

I would say we should have a testing pattern in place before merging this. Would set us up well. Happy to help

frontend/src/components/Checkbox.jsx Show resolved Hide resolved
frontend/src/game/StartPanel.jsx Show resolved Hide resolved
@HerveH44 HerveH44 marked this pull request as draft January 22, 2021 15:05
@mixmix
Copy link
Member

mixmix commented Feb 26, 2022

I'm keen to see redux put in place. The app starts is kinda stressful currently.

This PR seems like a great start.
Who would like to help get this updated and merged? I'm up for figuring stuff out if noone else is (eg how to write tests with this current thing).

Do we also need to consider how any recent changes to react have influenced this work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature Request: Refactor frontend state management
3 participants