According to the Nx Docs, features of an application should still be moved into libraries. Of course, I can add feature-level state to each of these libraries, but what if there is a property on the global AppState that I would like to access from a feature library? I cannot import anything from the apps/ directory.
Is there a way to share state with feature libraries or should I move my features back into the apps/ directory?
The thing is that there are feature reducers and selectors.
However, it is important to understand that there is no feature store.
There is only one global store which has state for all the reducers.
Therefore feature reducers and selectors work with the global store and global state and can fully access it.
For example, if two different modules call StoreModule.forFeature('test', testReducer) - both modules share the state, although it might give an impression that every module has own test feature state.
My workaround has been to avoid a global store state. Instead, I create a dedicated, componentless module defining the forFeature() state, selectors, reducers, effects, etc. I then export all those from the dedicated module using forRoot().
Now I can import this dedicated feature state module into independent application feature modules. As #satanTime points out, this state is not duplicated or replaced since it is added to the global state via forFeature().
Related
The Question
Is it possible to separate out the feature of an RTK-based application that depend on different slices of a the redux store into separate node packages? Assuming so, what is the best way to do that?
Background
We have a large, and growing, app that is based around Redux Toolkit. Where possible we try to separate parts of the application into their own node packages. We find there are a lot of benefits to doing this, including:
Maintainability of codebase
Fine-grained control over intra-application dependencies
Testability
It's easy enough to do this for cross-cutting things, like logging, http requests, routing, etc. But we would like to go further and modularize the "features" of our app. For example, have the "address book" feature of our application live in a different module than, say, the "messages" feature, with them all composed together via an "app" package.
The benefits we see here are ones we have found in other codebases and have been discussed in other places. (E.g., here for iOS). But, in brief: (1) you can see and control intra-app dependencies. For example, you can easily see if the "messages" feature depends on the "address book" feature and make explicit decisions about how you will expose the one feature to the other via what you export; (2) you can build fully testable sub-parts of the app by simply having a "preview" package that only composes in the things you want to test, e.g., you could have a "contact app" package that only depends on the "contact" feature for building and testing just that; (3) you can speed up CI/CD times by not needing to compile (TS/babel), pack/minify, and unit test every part; (4) you can utilize various analytics tools to get more fine-grained pictures of how each feature is developing.
There may well be other ways to achieve these things, and some may disagree with the premise that this is a good way to do it. That's not the focus of the question, but I'm open to the possibility it may be the best answer (e.g., some one with significant Redux experience may explain why this is a bad idea).
The Problem
We've struggled to come up with a good way to do this with Redux Toolkit. The problem seems to boil down to -- is there a good way to modularize (via separate node packages) the various "slices" used in RTK? (This may apply to other Redux implementations but we are heavily invested in RTK).
It's easy enough to have a package that exports the various items that will be used by the redux store, i.e., the slice state, action creators, async thunks, and selectors. And RTK will then compose those very nicely in the higher-level app. In other words, you can easily have an "app" package that holds the store, and then a "contacts" package that exports the "contacts" slice, with its attendant actions, thunks, selectors, etc.
The problem comes if you also want the components and hooks that use that portion of slice to live in the same package as the slice, e.g., in the "contacts" package. Those components/hooks will need access to the global dispatch and the global useSelector hook to really work, but that only exists in the "app" component, i.e., the feature that composes together the various feature packages.
Possibilities Considered
We could export the global dispatch and useSelector from the "higher" level "app" package, but then our sub-components now depend on the higher level packages. That means we can no longer build alternate higher level packages that compose different arrangements of sub packages.
We could use separate stores. This has been discussed in the past regarding Redux and has been discouraged, although there is some suggestion it might be OK if you are trying to achieve modularization. These discussions are also somewhat old.
The Question (Again)
Is it possible to separate out the feature of an RTK-based application that depend on different slices of a the redux store into separate node packages? Assuming so, what is the best way to do that?
While I'm primarily interested if if/how this can be done in RTK, I'd also be interested in answers--especially from folks with experience with RTK/redux on large apps--as to whether this is Bad Idea and what other approaches are taken to achieve the benefits of modularization.
This question has come up in other contexts, most notably how to write selector functions that need to know where a given slice's state is attached to the root state object. Randy Coulman had an excellent and insightful series of blog posts on that topic back in 2016 and a follow-up post in 2018 that cover several related aspects - see Solving Circular Dependencies in Modular Redux for that post and links to the prior ones.
My general thought here is that you'd need to have these modules provide some method that allows injecting the root dispatch or asking the module for its provided pieces, and then wires those together at the app level. I haven't had to deal with any of this myself, but I agree it's probably one of the weaker aspects of using Redux due to the architectural aspects.
For some related prior art, you might want to look at these libraries:
https://github.com/ioof-holdings/redux-dynostore (deprecated / unmaintained, but relevant)
https://github.com/microsoft/redux-dynamic-modules (also may be unmaintained at this point - still seems to rely on React-Redux v5)
https://github.com/fostyfost/redux-eggs (brand new - the author just posted this on the RTK "Discussions" section recently)
Might also be worth filing this same question over in the RTK "Discussions" area as well so we can talk about it further.
Following #markerikson's suggestion, here's the solution I've come up with. The basic idea involves a dependency injection model where the higher level 'app' package:
imports the 'feature' package's slice
composes a store with it
calls an initialize function also exported from the 'feature' package which injects the dispatch and state (actually the hooks that wrap them, but you could do it either way).
The last part is what allows the 'feature' package to stay un-coupled from the 'app' package.
The 'feature' package also has some typing that defines root state and app dispatch interfaces as types that include at least the local state and dispatch of that feature.
Here's the key code, using the redux-typescript template in create-react-app as a starting point and extracting the counter feature into a separate package. The code is in the counterSlice module
// RootStateInterface is defined as including at least this slice and any other slices that
// might be added by a calling package
type RootStateInterface = { counter: CounterState } & Record<string, any>;
// A version of AppThunk that uses the RootStateInterface just defined
type AppThunkInterface<ReturnType = void> = ThunkAction<
ReturnType,
RootStateInterface,
unknown,
Action<string>
>;
// A version of use selector that includes the RootStateInterface we just defined
export let useSliceSelector: TypedUseSelectorHook<RootStateInterface> =
useSelector;
// This function would configure a "local" store if called, but currently it is
// not called, and is just used for type inference.
const configureLocalStore = () =>
configureStore({
reducer: { counter: counterSlice.reducer },
});
// Infer the type of the dispatch that would be needed for a store that consisted of
// just this slice
type SliceDispatch = ReturnType<typeof configureLocalStore>["dispatch"];
// AppDispatchInterface is defined as including at least this slices "local" dispatch and
// the dispatch of any slices that might be added by the calling package.
type AppDispatchInterface = SliceDispatch & ThunkDispatch<any, any, any>;
export let useSliceDispatch = () => useDispatch<AppDispatchInterface>();
// Allows initializing of this package by a calling package with the "global"
// dispatch and selector hooks of that package, provided they satisfy this packages
// state and dispatch interfaces--which they will if the imported this package and
// used it to compose their store.
export const initializeSlicePackage = (
useAppDispatch: typeof useSliceDispatch,
useAppSelector: typeof useSliceSelector
) => {
useSliceDispatch = useAppDispatch;
useSliceSelector = useAppSelector;
};
A working example of this solution is available in this rush repository.
Creating an application that uses redux state quite seriously.
While passing values between the UI components and the reducers. The immutability has become a problem.
1) The cycle problem - I have forms that create JSON objects - which are then used by reducers to maintain the model. The next time you use a form, it is set to the earlier state,.. and either gives error or updates the previous attribute along with itself. Is there someway to capture things in non redux state and then pass it to the states for process?
2) Redux returns or reducers become extremely unmanageable on scale. I have started using immer for this. Is this a good choice?
Are you using Reactjs for creating the forms?
To benefit most from immutabilitiy it is best if your design embraces it also.
What I mean: Develop a form which just displays your data. (a pure form, or FormPure)
Then wrap this form / component by another component which holds the state of the form to be displayed and actually displays the data through the pure form. And allows you to just edit it.
The hierarchy would look like: App > Form > FormPure
Components
Form:
Connected to Redux
May have its own state.
FormPure:
Does not know about redux
Only displays data provided from its parent (in react via props and communicated via callbacks up)
When the user hits the Save Button then the connected Component (Form) may dispatch an action to update the state in redux.
This way you may build your FormPure in isolation separately from any data, and just bring it to live as needed.
You may consider using Storybook for nicely designing your components.
For 2: Yes immer is reasonably fine to use, just make sure you are not overusing it by creating to large object trees, as described in the documentation.
Also make sure to turn off autofreezing when deploying it to production.
Hint: immer uses Proxy make sure your target platform supports them, or make sure to switch then to the ES5 implementation which is considerably slower (see, immer docs)
I have the following code
const reduxStore = require('redux/store');
console.log(typeof reduxStore.subscribe);
If I run that in a redux actions file my typeof is undefined.
If I run it in a vanilla js my typeof is function.
Now maybe doing this seems counterintuitive but I have a pattern where I have a shared actions file, that is to say the actions defined in this file can be used in two different reducers.
However some of these actions while shared between reducers (reducer1, reducer2) must cause actions to run that are individual to the particular store domain.
So dependant on what happens when reducer1.acceptGeoCode runs in the part of the application using reducer2 then reducer2.geoCodeSuccess should be run or reducer2.geoCodeFailed
it seems easiest to me to subscribe to changes in my reducer2 actions js, and then on the changes dispatch the local action I should use.
So that is why I want to use reduxStore.subscribe within an actions file. How do I do that, or failing that what is the proper way to do what I want to do which I feel must be doable.
If I understand you correctly, you want to have reducer 2 be aware of how reducer1 handled an action, is that right?
The way to do that is by composing reducers (as opposed to combining them). See this in action here: Stack Overflow
A couple of other points that might help you on your way:
Reducers should be pure. This means we don't do ajax calls (or other side effects) from inside a reducer. That is the domain of actions (ex: redux-thunk) and middlewares.
In the majority of applications, there should really only be one store. So, if you have a pattern where you have one store subscribing to another, then you should probably refactor your code to have just one store. Just to be clear, you can have several reducers combined (or composed) together in a single store - that's how Redux is designed to work.
I'm asking for better understanding.
I am now using firebase and firestore as backend for a project. I know it is highly recommended to use a state management library such as redux or mobx as the single source of truth for application state. However, firestore is realtime database, what are the reasons then, to store the real time data from firestore in a state store prior to using in in the application ?
It doesn't matter what is the backend you use. You don't have to use redux and you shouldn't use it unless you need it and that depends on the application size and architecture. Ask yourself those questions:
Will you be able to lift the state up to a shared parent component
between the children that needs the same slice of state !? If yes,
you don't need redux.
Will you have to pass the state many levels down the component tree
until it becomes annoying because a deeply nested component needs it
!? If yes, you may need redux.
From redux website:
In general, use Redux when you have reasonable amounts of data
changing over time, you need a single source of truth, and you find
that approaches like keeping everything in a top-level React
component's state are no longer sufficient.
You can read more about it here: When should you use redux?
I love Redux, but to use it, I have LOTS of additional code scattered all over my application: connect, mapDispatchToProps, mapStateToProps etc etc
It appears to me however that I should be able to both dispatch to the store and get any value from the store via a global window level reference to the store object. If I did this, it would cut alot of code out of my application.
So the question is, what is wrong with this approach? Why NOT do all my Redux disptach and state access via window.store?
I wrote a long Reddit comment a while back about why you should use the React-Redux library instead of writing store code by hand.
Quoting the main part of that answer:
First, while you can manually write the code to subscribe to the Redux store in your React components, there's absolutely no reason to write that code yourself. The wrapper components generated by React-Redux's connect function already have that store subscription logic taken care of for you.
Second, connect does a lot of work to ensure that your actual components only re-render when they actually need to. That includes lots of memoization work, and comparisons against the props from the parent component and the values returned by your mapStateToProps function for that component. By not using connect, you're giving up all those performance improvements, and your components will be unnecessarily re-rendering all the time.
Third, by only connecting your top-level component, you are also causing the rest of your app to re-render unnecessarily. The best performance pattern is to connect lots of components in your app, with each connected component only extracting the pieces of data it actually needs via mapStateToProps. That way, if any other data changes, that component won't re-render.
Fourth, you're manually importing the store into your components, and directly coupling them together, thus making it harder to test the components. I personally try to keep my components "unaware" of Redux. They never reference props.dispatch, but rather call pre-bound action creators like this.props.someFunction(). The component doesn't "know" that it's a Redux action creator - that function could be a callback from a parent component, a bound-up Redux action creator, or a mock function in a test, thus making the component more reusable and testable.
And finally, the vast majority of apps built using React and Redux use the React-Redux library. It's the official way to bind the two together, and doing anything else will just confuse other developers looking at your project.
Also, per the Redux FAQ entry on importing the store directly:
While you can reference your store instance by importing it directly, this is not a recommended pattern in Redux. If you create a store instance and export it from a module, it will become a singleton. This means it will be harder to isolate a Redux app as a component of a larger app, if this is ever necessary, or to enable server rendering, because on the server you want to create separate store instances for every request.
Summarizing all that:
Better performance
Lower coupling via dependency injection of the store
Better testability
Better architecture
I'd also suggest you read through my two-part post The Tao of Redux, Part 1 - Implementation and Intent, and The Tao of Redux, Part 2 - Practice and Philosophy. These two posts discuss the history and intent behind Redux's design, how it's meant to be used, why common usage patterns exist, and other ways that people may use Redux.