Things I wish I knew about state management when I started writing React apps

We also created associated custom hooks that allow developers to easily "inject" a service into their React component (we use React's Context API for our "DI container").

From there developers can read the service state to drive the look of the UI, or send events to it to trigger behaviour that is encapsulated in the service itself.

Our most used service is a UserSession service that manages OAuth based login flow and session management.

The best part of this approach is that our service layer started in an Angular based proof-of-concept before we lifted-and-shifted it all into React.

[1] https://xstate.js.org/

Obviously there is the advantage of the web platform to leverage with JS frameworks, but there was something really nice about being able to drag and drop standard controls that all users were familiar with, and then just attach some code to them that talked to a database or whatever. I think that was the Parent's point that modern web development, while having the advantages of the web, is still more complicated than what was popular a decade or two ago for making UIs.

The terminology exists because Redux was originally designed as "just" another implementation of the Flux Architecture. Both "actions" and "action creators" were terms that had already been introduced by Flux [1]. There was considerable debate during the initial design phase about what terms to use, and the conclusion was to stick with Flux terminology to match the target audience of the time [2].

Note that the new Redux Style Guide docs page specifically recommends "modeling actions as 'events'" [3], using the "ducks" pattern for single-file Redux logic [4], and writing Redux logic using TypeScript [5].

In addition, our new official Redux Toolkit package [6] is our recommended approach for writing Redux logic. It has several utilities for common use cases like setting up the store, writing immutable updates, and creating slices of state, and it's written in TypeScript with an API designed to minimize the amount of type declarations you have to write. (In fact, I've even used its `createSlice()` function to write some fairly complex reducer logic that I used with React's `useReducer` hook.)

Finally, you _can_ reference multiple parts of the state tree in your reducer logic, but you have to explicitly set that up yourself [7]. The `combineReducers` utility is meant for the standard use case of defining update logic by domain "slices", and it's up to you to write custom logic if you need more specific behavior than that.

[0] https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-ta...

[1] https://facebook.github.io/flux/docs/in-depth-overview#actio...

[2] https://github.com/reduxjs/redux/issues/891#issuecomment-147...

[3] https://redux.js.org/style-guide/style-guide#model-actions-a...

[4] https://redux.js.org/style-guide/style-guide#structure-files...

[5] https://redux.js.org/style-guide/style-guide#use-static-typi...

[6] https://redux-toolkit.js.org

[7] https://redux.js.org/recipes/structuring-reducers/beyond-com...

https://facebook.github.io/flux/docs/in-depth-overview

Redux was originally designed as a Flux implementation:

https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-ta...