Redux proof of concept #33

Closed

6ea86b96 wants to merge 38 commits from redux into master

6ea86b96 commented

2017-04-09 10:09:25 +02:00

(Migrated from github.com)

It's much easier to understand/reason about when the state is separated from the presentation logic. Redux provides a state container for js apps and React Redux makes it easy to tie into React apps.

I think it would significantly speed up and simply development if lbry-app would move to this architecture. Attached is an example of how this could look. I was planning to quickly refactor one component to demonstrate, but obviously the App container was a bad choice as I ended up having to refactor lots of other components to go with it :) Sorry it's just one big commit. It was hard to submit such sweeping changes in small pieces.

In it's current state, booting the app, installing upgrades, opening/closing the drawer and navigating the drawer components works using redux.

With this architecture components are dumb and just render html, or other containers. State is stored in a global hash. Selectors are injected into the container props and used for presentational logic. Selectors select a pieces of data from the global store. Actions are also injected into the containers wrapped inside a special dispatch function. When the container dispatches an action it modifies the state of the global store via the corresponding reducer. The component will automatically be re-rendered if any of the data any of it's selectors is using is changed.

There's a great video for understanding redux on egghead.io

I also added a electron-debug just to help me get things working. I haven't worked on electron before, so couldn't figure a few things out.

I love the concept of Library Credits and if you're interested in this approach I would like to refactor the rest of the app. I don't think it would be a huge amount of work. It took around a day to do what I've committed so far. After that I'd love to help get this thing released.

It's much easier to understand/reason about when the state is separated from the presentation logic. [Redux](http://redux.js.org/) provides a state container for js apps and [React Redux](https://github.com/reactjs/react-redux) makes it easy to tie into React apps. I think it would significantly speed up and simply development if lbry-app would move to this architecture. Attached is an example of how this could look. I was planning to quickly refactor one component to demonstrate, but obviously the `App` container was a bad choice as I ended up having to refactor lots of other components to go with it :) Sorry it's just one big commit. It was hard to submit such sweeping changes in small pieces. In it's current state, booting the app, installing upgrades, opening/closing the drawer and navigating the drawer components works using redux. With this architecture components are dumb and just render html, or other containers. State is stored in a global hash. Selectors are injected into the container props and used for presentational logic. Selectors select a pieces of data from the global store. Actions are also injected into the containers wrapped inside a special `dispatch` function. When the container dispatches an action it modifies the state of the global store via the corresponding `reducer`. The component will automatically be re-rendered if any of the data any of it's selectors is using is changed. There's a great video for understanding redux on [egghead.io](https://egghead.io/courses/getting-started-with-redux) I also added a `electron-debug` just to help me get things working. I haven't worked on electron before, so couldn't figure a few things out. I love the concept of Library Credits and if you're interested in this approach I would like to refactor the rest of the app. I don't think it would be a huge amount of work. It took around a day to do what I've committed so far. After that I'd love to help get this thing released.

kauffj commented

2017-04-09 17:21:07 +02:00

(Migrated from github.com)

I think this makes a lot of sense and is some fantastic work!

We have a new release coming out very soon (presumably tomorrow) that contains a decent amount of other UI changes. As soon as that's finished, I'm going to try merging the two branches and then I think we can use Redux moving forward.

If you're in our Slack, please ping me as @kauffj or send me an email at jeremy@lbry.io.

I think this makes a lot of sense and is some fantastic work! We have a new release coming out very soon (presumably tomorrow) that contains a decent amount of other UI changes. As soon as that's finished, I'm going to try merging the two branches and then I think we can use Redux moving forward. If you're in our Slack, please ping me as @kauffj or send me an email at jeremy@lbry.io.

kauffj commented

2017-04-21 03:16:13 +02:00

(Migrated from github.com)

@6ea86b96 I created branch redux off the current version of master and merged this PR with that one. Should save you some time and was a good way for me to understand the changes.

@6ea86b96 I created branch `redux` off the current version of master and merged this PR with that one. Should save you some time and was a good way for me to understand the changes.

lyoshenka commented

2017-05-01 17:42:46 +02:00

(Migrated from github.com)

work has moved to #53 so I'm closing this