What are differences between redux react and redux thunk？

Redux: Redux is a standalone state management library that can be used with any JavaScript application. Its core concept is maintaining a single global state object that is immutable. When we want to change the state, we dispatch an action—a plain object describing the event. This action is then sent to the reducer function, which determines how to update the state based on the action type and its payload. For example, in a counter application, you might have an action { type: 'INCREMENT' } and a reducer that increments the counter value when it encounters this action.

React-Redux: React-Redux is the official React binding for Redux, enabling seamless integration with React applications. It provides the <Provider> component, which makes the Redux store accessible throughout the application, and the connect() function, which connects React components to the Redux store. In newer versions of React Redux, the functionality of connect() can be implemented using React hooks like useSelector and useDispatch. For instance, if you have a React component displaying the counter value, you can use useSelector to retrieve the current counter value and useDispatch to dispatch actions such as INCREMENT or DECREMENT.

Redux-Thunk: Redux-Thunk is a middleware for Redux that allows asynchronous operations within action creator functions. Traditionally, action creator functions return an action object, but with Redux-Thunk, we can return a function that receives dispatch and getState as parameters. This enables asynchronous API calls within action creator functions and dispatching regular synchronous actions when data arrives. For example, if you have an asynchronous operation loading data from a server, you might have a thunk action creator function that dispatches { type: 'LOADING_DATA' } when starting the load, { type: 'DATA_LOADED', payload: data } upon successful data retrieval, and { type: 'LOADING_ERROR', error: error } if an error occurs.

In summary, Redux forms the foundation for building state management systems, React-Redux serves as the integration tool for connecting Redux to React applications, and Redux-Thunk extends Redux to handle asynchronous operations. Together, they create a powerful React application state management system capable of handling both synchronous and asynchronous logic.

• Redux: A library for managing application state.
• react-redux: A library for managing the state of React applications (using Redux).
• redux-thunk: A middleware for logging, crash reporting, communicating with asynchronous APIs, routing, and other tasks.

Answering your title question:

What is the difference between redux, react-redux, and redux-thunk?

1. redux: The core library (independent of React)
2. redux-thunk: A Redux middleware that helps you handle asynchronous operations
3. react-redux: Connects your Redux store with React components

Redux has a store.

1. Whenever you want to update the state in the store, you can dispatch an action.
2. The action is captured by one or more reducers.
3. The reducer creates a new state that combines the old state and the dispatched action.
4. Store subscribers receive notifications about the new state.

• Store - Holds the state, processes the dispatch through the middleware and reducer pipeline when new actions arrive, and notifies subscribers when the state is updated.
• Component - A dumb view component that doesn't directly know about the state. Also known as a presentational component.
• Container - A view segment that uses React-Redux to be aware of the state. Also known as a smart component or higher-order component.

Note that containers/smart components and dumb components are simply a good approach for building applications.

• Action - Same as Flux - a command pattern with a type and payload.
• Action creator - A DRY way to create actions (not absolutely necessary).

• redux - A Flux-like data flow with a single store, usable in any environment you prefer, including vanilla JavaScript, React, Angular 1 or 2, etc.
• React-Redux - The binding between Redux and React. This library provides a set of React hooks - useSelector() to fetch data from the store, useStore() to access the store, and useDispatch() to dispatch actions. You can also use the connect() function to create higher-order components (HoCs), which listen for state changes in the store, prepare props for the wrapped component, and re-render the wrapped component when the state changes.
• redux-thunk - Middleware that allows you to write action creators returning functions instead of actions. Thunks can be used to delay dispatching an action or dispatch only when certain conditions are met. Primarily used for asynchronous API calls, dispatching another action on success/failure.

• Redux official documentation
• Redux introduction
• Building React applications with idiomatic Redux
• Presentational and container components