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 sim

Answer 1

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

Answer 2

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 3

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 know 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 enviroment you like including vanilla js, react, angular 1/2, etc...

• react-redux - bindings between redux and react, that creates containers (smart components) that listen to the store's state changes, prepare the props for and rerender the presentational (dumb) components.

• 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

Answer 4

bellow image demonstrates how data flow in redux : how the data flows through Redux? Advantages of Redux are listed below:

Predictability of outcome – Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application. Maintainability – The code becomes easier to maintain with a predictable outcome and strict structure. Server-side rendering – You just need to pass the store created on the server, to the client-side. This is very useful for initial render and provides a better user experience as it optimizes the application performance. Developer tools – From actions to state changes, developers can track everything going on in the application in real-time. Community and ecosystem – Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it. Ease of testing – Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent. [Organization][2] – Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.