What are differences between redux, react-redux, redux-thunk?

To answer you title question:

What are differences between redux, react-redux, redux-thunk?

1. redux: main library (independent from React)
2. redux-thunk: a redux middleware which helps you with async actions
3. react-redux: connects your redux store with ReactComponents

1. Can someone clearly explain how control flow happens in redux ?

Redux has (always) a single store.

1. Whenever you want to replace the state in the store, you dispatch an action.

2. The action is caught by one or more reducers.

3. The reducer/s create a new state that combines the old state, and the dispatched action.

4. The store subscribers are notified that there is a new state.

2. What are roles of components/containers/actions/action creators/store in redux ?

• Store - holds the state, and when a new action arrives runs the dispatch -> middleware -> reducers pipeline, and notifies subscribers when the state is replaced by a new one.

• Components - dumb view parts which are not aware of the state directly. Also known as presentational components.

• Containers - pieces of the view that are aware of the state using react-redux. Also known as smart components, and higher order components

---

Note that containers / smart components vs. dumb components is just a good way to structure your app.

---

• Actions - same as flux - command pattern with type and payload.

• Action creators - DRY way of creating actions (not strictly necessary)

3. Difference between redux/react-redux/redux-thunk/any others ?

• redux - flux like flow with a single store, that can be used in whatever environment you like including vanilla js, react, angular 1/2, etc...

• react-redux - bindings between redux and react. The library offers a set of react hooks - useSelector(), and useStore() to get the data from the store, and useDispatch() to dispatch actions. You can also use the connect() function to create HoCs (higher order components), that listen to the store's state changes, prepare the props for the wrapped component, and re-render the wrapped components when the state changes.

• redux-thunk - middleware that allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. Used mainly for async calls to api, that dispatch another action on success / failure.

4. It would be very helpful if you can post links to any simple and precise redux tutorials.

• Redux official docs

• Getting Started with Redux

• Building React Applications with Idiomatic Redux

• Presentational and Container Components

• redux: Library for managing application state.
• react-redux: Library for managing React application (redux) state.
• redux-thunk: a middleware for logging, crash reporting, talking to an async API, routing etc...