UPDATE: I have created a standalone and more advanced project on GitHub with ready-to-use code on GitHub: https://github.com/Dynalon/reactive-state. All further development happens there. Please use this repo in the future. This existing repo is kept for educational purposes in the meantime.

Redux pattern implemented in RxJS

This is a sample project / tutorial that demonstrates how to implement the Redux pattern (i.e. for usage with React) in TypeScript using only RxJS v5 inspired by the blog post by Michael Zalecki. The code is very simple and can be used in production (you only need to include the rxjs-redux.ts file which has less than 20 lines of code).

Advantages

• Typed actions by default: No need for FSA or magic string constants; all actions are implemented using the .next() and .error() methods on typed Rx.Subjects.
• No need for endless switch statements
• Almost no boilerplate code, no dependencies other than RxJS using only the map, merge, scan and publishReplay operators.

How to build

1. Clone this repo
2. npm install
3. npm run build
4. npm run serve to start a http-server in dist/ for testing

Production use

You can use this code in production, all you need is to copy the file rxjs-redux.ts into your project (or use the compiled .js alternative if you use plain JavaScript).

Notes

• Webpack is used as a module bundler, but the pattern will also work using other module bundlers or typescript module outputs.