Redux-toolkit: Are there any examples of a full project that use redux-starter-kit?

[JarLowrey]

I'm trying to figure out how to architect my project and am not sure how all the parts and pieces here fit together.

[markerikson]

Writing both a "Usage Guide" page and a couple of full-blown example apps has been on my todo list for a while, but not sure when I'll have time to get to it.

The best example atm is someone's "Redux is too complicated!!!!!" comparison app that I refactored to use RSK a while back:

https://www.reddit.com/r/reactjs/comments/a0b1sa/frustrated_with_redux_so_i_created_abredux_vs/eagqit6/

In general, you ought to be able to:

• replace your existing store setup code with configureStore()
• replace reducers that have switch statements and spread operators using createReducer()
• possibly replace some reducers + hand-written action creators using createSlice()

The configureStore() setup also includes some middleware that check for common errors like mutating the state.

[Sharlaan]

Ideally, i would love to see an example based on createSlice and including :

• both sync and async actions
• fully typed actions and reducer
• caching repeated actions (memoization)
• example showing how useless rerendering are prevented with RSK

[markerikson]

@Sharlaan : RSK doesn't do anything about "preventing useless rerendering" atm, other than including createSelector out of the box for you to import and use yourself.

But yeah, I'd love to see some RSK examples put together, I just don't have time to write any myself right now.

[harmonyjs]

Yeah, plus one. I believe that "the starter kit" should give a good introduction to the overall picture, it's really "nice-to-have" feature for docs. Especially it would be cool to see a project based on RSK with typescript — properly used types and other stuff. So far, I've found two great guides about redux+typescript in common:
https://github.com/piotrwitek/react-redux-typescript-guide
https://github.com/piotrwitek/typesafe-actions#behold-the-mighty-tutorial

But it's not enough to find answers for all tricky moments and absolutely nothing about RSK.

[markerikson]

As I said, I'd love to see example projects created, but I've got other priorities atm.

I _did_ just publish a "Usage Guide" docs page, which hopefully should help:

https://redux-starter-kit.js.org/usage/usage-guide

[virajkulkarni14]

@JarLowrey, I second your comment. I'm trying to use RSK at work, but couldn't find a good sample app to base some of the use cases on.

@markerikson, could you please let us know if there's been some dev work on this? I saw this PR:
https://github.com/reduxjs/redux-starter-kit/pull/11

[markerikson]

No "full" projects to show off atm, I'm afraid.

That said, I _have_ taken two small projects that other people wrote first, and filed PRs showing how to convert them to RSK to simplify the code:

https://www.reddit.com/r/reactjs/comments/a0b1sa/frustrated_with_redux_so_i_created_abredux_vs/eagqit6/

https://www.reddit.com/r/reactjs/comments/bhb3bc/react_redux_with_hooks_using_new_reactredux_71/

Hopefully those at least help a bit.

(Also, that PR is way out of date by now.)

[virajkulkarni14]

Not a problem @markerikson, thank you for the existing links. Sorry for not specifically mentioning this in the previous comment, but I'm looking for an app that also demonstrates testing a slice or a reducer created using RSK. If I am able to figure it out, I would like to contribute the sample app to this repo. :)

[alicialics]

I recently implemented a small project using redux-starter-kit and hooks api from [email protected]. It works really well, the only bit I had trouble with was getting redux-thunk to work. I finally figured out it should not be part of reducers in createSlice. https://github.com/zhuoli99/radiotrax-code-challenge

[markerikson]

@zhuoli99 : yeah, several folks seem to be making that same mistake. I haven't yet figured out how to explain that one correctly, but I probably ought to update the docs somehow.

Also, I glanced through the repo. Very nice work! :)

[arvigeus]

Let me chime in too: I am also working on a redux-starter-kid + redux hooks based project. It's a banal TODO app, but I try to make it as close to real world as it could be. Since I haven't done something at that scale before, it's a learning experience for me, and hopefully it will be useful for other people as well.

[markerikson]

Yeah, I've got a small example project at https://github.com/markerikson/rsk-github-issues-experiment that I'm hoping to turn into a tutorial page.

[adammlr]

Its still a WIP, but I've created https://github.com/adammlr/react-sample that uses slices, createSelector, async actions, and hooks. Open to feedback as I'm going to use this for a larger project.

[arvigeus]

Here is what I am working on (very WIP, still learning):
https://react-modern-state-management.now.sh/redux
Source: https://github.com/arvigeus/react-modern-state-management/tree/master/src/pages/redux

Ideally this will also have MobX, Apollo, and other state providers. I am hoping to turn it into some sort of tutorial / comparison.

PS: I am gladly accepting help / suggestions

[markerikson]

Resolved now that the "Advanced" tutorial is done: https://redux-starter-kit.js.org/tutorials/advanced-tutorial

[connor-odoherty]

@markerikson First off, these new tutorials have been extremely instructive, thanks a ton for putting them together!

However, from talking to others in the community, it seems like there is large teaching gap surrounding testing best practices. Would be be able re-open this ticket (or start a new one), to start hammering out best practices for testing, mocking, and stubbing slices?

[markerikson]

If there's a need for other docs, go ahead and open up a separate issue.

That said, there shouldn't be anything specific needed for "slices" that would be any different than testing "vanilla" Redux logic. Reducers are trivial to test (and as of 1.0 you can test the individual case reducers if you want), and there's no need to test the generated action creators. That's all that's in a slice. Any thunks you write are done as usual, and it's up to you if and how you test those.

Out of curiosity, who have you been talking to, and where are these discussions taking place?

[connor-odoherty]

The reducers are easy to test, and are well-documented. The more 'grey' areas arrive when building out tests for components that subscribe to selectors and implement various Redux-hooks, as well as asynchronous actions.

I have found the initial setup and stubbing to be the biggest headache through trial and error. While I definitely learned a lot in the process, it would be helpful to have a playbook of sorts to jump off from.

And this has been brought up in discussions with coworkers, friends who have launched their own projects with RSK, and React meetups.

[markerikson]

There really isn't anything specific about RSK in relation to any of that, though. That said, I'd be fine with trying to flesh out the core docs page on testing as part of the docs revamp we're starting (see https://github.com/reduxjs/redux/issues/3596 and https://github.com/reduxjs/redux/milestone/5 ).

I also have links to some existing articles on testing Redux here:

https://github.com/markerikson/react-redux-links/blob/master/react-redux-testing.md

[tanaypratap]

Hey @markerikson! I am teaching redux-toolkit in a bootcamp and my students can definitely use some real-world examples if it's available.
The social media app is a great tutorial btw, just looking for some more examples if you have it handy.