xstate VS cra-template-redux

XState is a powerful library with comprehensive documentation. Keeping the documentation handy while building your next app with XState will be invaluable.

XState is an excellent library that simplifies the utilization of actors in JavaScript applications. While this article focuses on using React, these principles apply equally well to other frameworks. In fact, they can be implemented anywhere JavaScript is executed.

In this article, I want to share a personal journey of discovery in the world of state management. My path led me to XState, a tool that I believe is the best choice for managing state in modern applications like React, Angular, Vue, and others. This isn't just a professional advice; it's a personal recommendation based on real-world experience.

You add the current user state to a React Context or state management library, read from it on the top bar, and write to it after a user signs in. Done. No big deal, right?

Lastly, I know that I've omitted many great tools like XState, React Query, and SWR. These tools are utilities that are very scalable in their own right, but aren't full replacements for a good state manager.

The recommended way to initialize a new app with React and Redux is by using the official Redux+JS template or Redux+TS template.

https://github.com/kriasoft/react-firebase-starter is the most complete I found so far. Or you can go with the redux suggested template as well https://github.com/reduxjs/cra-template-redux .

The patterns shown in this tutorial are outdated and not what we currently recommend. "Modern Redux" code is very different than what this and other older tutorials show. We've introduced newer APIs like Redux Toolkit, which is a set of utilities that provide a light abstraction to simplify the most common Redux tasks, and the React-Redux hooks API, which is generally easier to use than the traditional connect API.

I strongly recommend reading through the newly rewritten official tutorials in the Redux docs, which have been specifically designed to teach you how Redux works and show our recommended practices:

- "Redux Essentials" tutorial [0]: teaches "how to use Redux, the right way", by building a real-world app using Redux Toolkit

- "Redux Fundamentals" tutorial [1]: teaches "how Redux works, from the bottom up", by showing how to write Redux code by hand and why standard usage patterns exist, and how Redux Toolkit simplifies those patterns

The older patterns shown in almost all other tutorials on the internet are still valid, but not how we recommend writing Redux code today.

You should also read through the Redux "Style Guide" docs page [2], which explains our recommended patterns and best practices. Following those will result in better and more maintainable Redux apps.

In addition, the easiest way to start a new project is with the official Redux+JS template for Create-React-App [3]. It comes with Redux Toolkit and the React-Redux hooks API already set up when the project is created.

[0] https://redux.js.org/tutorials/essentials/part-1-overview-co...

[1] https://redux.js.org/tutorials/fundamentals/part-1-overview

[2] https://redux.js.org/style-guide/style-guide

[3] https://github.com/reduxjs/cra-template-redux

In addition, the easiest way to start a new project is with the official Redux+JS template for Create-React-App. It comes with Redux Toolkit and the React-Redux hooks API already set up when the project is created.

We have a Redux template for Create-React-App that comes with Redux Toolkit already configured

Also, you can go with the official template for create-react-app, which will already give you a small application with modern redux to play around with: https://github.com/reduxjs/cra-template-redux

- I did check the template thoroughly but it seems like the folder structure conflicts with the one this tool offers. Usually an app's redux logic is kept under src/redux or src/store, whereas in the template it's kept in the folder containing the components's JSX/TSX file and it's Stylesheet, which felt quite weird to me. Also, the components are preferred to be kept under component directory under features. Although the folder structure conventions are highly debatable but this one is familiar with most devs.