Redux Schematic for Nx 8.4.x

TL;DR - Look at the slice generated by the schematic

This repository contains a proposal for the Redux Nx schematic. It is currently implemented as an Nx workspace schematic and can be invoked as follows.

yarn nx workspace-schematic redux [slice] --project [project]

Where [slice] is the name of the slice (e.g. products), and [project] is the name of the project as specified in workspace.json (e.g. products-feature).

Once it is part of the @nrwl/react module, it'll be invoked as follows.

yarn nx @nrwl/react:redux [slice] --project [project]

# OR if you have `defaultCollection: "@nrwl/react"` set in workspace.json
yarn nx redux [slice] --project [project]

Try it out!

Clone the workspace and run the demo app.

git clone https://github.com/jaysoo/nx-redux-schematic-proposal.git nx-demo
cd nx-demo
yarn
yarn start demo

Now you can navigate to http://localhost:4200 to see the running app. This app includes a single products feature slice.

Add new slice:

yarn nx workspace-schematic redux cart --project products-feature

Now you should have the new cart created an ready to use.

Project structure

This workspace divides projects into apps and libs. For more information on this setup, refer to the Nx docs on this topic.

The demo app is in the apps/demo folder, with the Redux setup being done in:

main.tsx, and
app.tsx

The products feature component and slice are created as a lib inside the libs/products/feature folder.

Component: src/lib/products-feature/products-feature.tsx
Slice: src/lib/+state

TODOs

Modify main.tsx and app.tsx to configure Redux store with the new slice.
Generate default spec file for reducer and selectors.
Maybe add an effects library other than redux-thunk? (See design)

Design Considerations

See the design doc for details.