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

Question

I am using React + Flux. Our team is planning to move from flux to redux. Redux is very confusing for me coming from flux world. In flux control flow is simple from Components -> actions -> Store and store updates back components. Its simple and very clear.

But in redux its confusing. There is no store here, yes there are some examples without using store. I went through several tutorials, it seems everyone has their own style of implementation. Some are using Containers and some are not. (I don't know this Containers concept and not able to understand what mapStateToProps, mapDispatchToProps does).

1. Can someone clearly explain how control flow happens in redux ?
2. What are roles of components/containers/actions/action creators/store in redux ?
3. Difference between redux/react-redux/redux-thunk/any others ??
4. It would be very helpful if you can post links to any simple and precise redux tutorials.

Answer 1

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

Answer 2

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