React provides basic state management within React components, but sometimes, this is not sufficient, especially when your application needs to share state between multiple components. State management solutions such as Flux, Redux, and MobX are quite popular in the React world and JHipster uses Redux as the state management layer.

Redux (https://redux.js.org/) is a predictable state management solution for JavaScript that evolved from the Flux concept (https://facebook.github.io/flux/). Redux provides a global immutable store that can only be updated by emitting or dispatching actions. An action is an object that describes what changed, and it uses a pure reducer function to transform the state. A reducer is a pure function (a function that does not cause any side effects) that takes in the current state and an action. It returns a new state after applying any logic that's specified in the function.

React Redux is a binding for Redux that provides a higher-order component called connect for React, which is used to connect React components to the Redux store. For example, let's take a look at src/main/webapp/app/modules/login/login.tsx:

export const Login = (props: ILoginProps) => {
  const [showModal, setShowModal] = useState(props.showModal);

  useEffect(() => {
    setShowModal(true);
  }, []);

  ...
};

const mapStateToProps = ({ authentication }: IRootState) => ({
  isAuthenticated: authentication.isAuthenticated,
  loginError: authentication.loginError,
  showModal: authentication.showModalLogin
});

const mapDispatchToProps = { login };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(Login);

In this component, we have the following:

• The mapStateToProps function is used to map properties from the global Redux store to the component's props.
• The mapDispatchToProps function is used to wrap the given functions with the Redux dispatch call.
• The useState hook provided by React lets us use a local state without writing a TypeScript class.
• The useEffect hook provided by React lets us perform side effects in function components.

Redux Promise Middleware (https://github.com/pburtchaell/redux-promise-middleware) is used to handle asynchronous action payloads. It accepts a Promise and dispatches pending, fulfilled, and rejected actions based on the Promise state. It is useful when Redux actions are making HTTP requests or performing async operations.

Redux Thunk (https://github.com/gaearon/redux-thunk) is another piece of middleware that's used to chain actions. It is useful when an action has to call another action based on certain conditions or in general to handle side effects.