xstate VS 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.

I'd like my React based SPA to render on server side (who's not these days). Therefore I want to combine React with react-router, redux and some build layer like isomorphic starterkit.

I have a application structure that mostly mimics the redux real-world example but can't get past getting this error:

In the todoMVC example of the redux project, the reducer for dealing with todos have these lines:

For a while now I've been wracking my brain as to how you would implement undo / redo in Redux with server interactions (via ajax).

{ "name": "add-projects", "version": "0.0.0", "description": "Add projects", "scripts": { "start": "node server.js" }, "repository": { "type": "git", "url": "https://github.com/rackt/redux.git" }, "license": "MIT", "bugs": { "url": "https://github.com/rackt/redux/issues" }, "homepage": "http://rackt.github.io/redux", "dependencies": { "immutable": "^3.7.6", "react": "^0.14.0", "react-dom": "^0.14.0", "react-redux": "^4.0.0", "redux": "^3.0.0", "redux-thunk": "^0.1.0", "redux-undo": "^0.5.0" }, "devDependencies": { "babel-core": "^5.6.18", "babel-loader": "^5.1.4", "babel-plugin-react-transform": "^1.1.0", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-tape-runner": "^2.0.0", "enzyme": "^2.0.0-rc1", "expect": "^1.6.0", "express": "^4.13.3", "jsdom": "^7.2.2", "node-libs-browser": "^0.5.2", "react-addons-test-utils": "^0.14.6", "react-transform-hmr": "^1.0.0", "tape": "^4.4.0", "tape-run": "^2.1.2", "webpack": "^1.9.11", "webpack-dev-middleware": "^1.2.0", "webpack-hot-middleware": "^2.2.0" }} Here is the server.js:

I can't find any examples online of someone working with the normalizr tree in this way. The official example does no adding and removing so it was no help either.