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.

Association

Have a look at the official Redux docs, this will give you a lot of insights into all the points you mentioned. – Decrypt

Reducer + Flux = Redux – Geomorphic

Answer 1

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

Preserve

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

Geomorphic

Answer 3

• 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...

Nahama

Answer 4

To my mind, Redux, is still a little confusing for the first time of studying this library, and need some time to understand and start to use one. Even if you use Redux Toolkit - the latest library (from Redux authors) - it also has some tricky moments which might be unclear from the beginning.

I`m using Master-Hook.

Redux , react-redux , redux-thunk , reselect are already installed in the library and you need to follow the steps.

1st step: Create ‘src/hooks.js’ file

import MasterHook from 'master-hook'

export const useMyHook = MasterHook({
  storage: "myStorage",
  initialState: {
    myName: 'Vanda',
  },
  cache: {
    myName: 10000,
  }
})

You create your component and export it (useMyHook) Set the initial State (initialState:...) Set how long the value need has to stay cached in ms (cache:...)

2nd step: Add Provider to src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MasterHook from 'master-hook';

ReactDOM.render(
  <React.StrictMode>
    <MasterHook.Provider>
      <App />
    </MasterHook.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

• Import MasterHook
• Wrapp your file with MasterHook.Provider

3rd step: Use your hook in src/App.js

    import logo from './logo.svg';
    import './App.css';
    import { useMyHook } from './hooks'
    
    function App() {
      const { myName, setMyName } = useMyHook()
    
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              My name is {myName}
            </p>
            <a
              onClick={() => setMyName('Boris')}
              className="App-link"
            >
              Set my name to 'Boris'
            </a>
          </header>
        </div>
      );
    }

export default App;

Import your hook useMyHook

Declare your hook

const { myName, setMyName } = useMyHook()

Use it in your code

{myName}

and

{()=>setMyName('')}

Delete href attribute to prevent it from changing the page. setMyName action is created automatically.

No need to connect to the store. It’s already connected.

4th step: Run your project!

npm run start

That`s it :)

Fisherman

Answer 5

Redux thunk is a middleware and it monitors or observes any dispatch action that passes through the system.

Saunders

Answer 6

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.

Clothesbasket