Understanding Redux with React
Tags: javascript, react, webdev
Published: 2021-10-09 11:19:06

This is sequence of my earlier [post](https://dev.to/bhupendra1011/understanding-redux-without-react-223n) about how to understand Redux in isolation and the problems it solves which cannot be solved by context API. To understand the importance of Redux in depth , [here](https://blog.isquaredsoftware.com/2018/03/redux-not-dead-yet/) is an excellent article.

###How to use React with Redux
Redux handles the store creation, middlewares & reducers logic. To use it with React, we need the instance of redux  store for all components which is made available through **Provider** (using Context API). In Order to get the state and dispatch methods from the store we can use the  *connect* from react-redux package. After Redux 7.0 we can use the  *useSelector* and  *useDispatch* hooks instead of wrapping our component with  *mapStateToProps* and   *mapDispatchToProps*.

### Let's Build a React/Redux Project
We will continue building the project that was discussed in this [post](https://dev.to/bhupendra1011/understanding-redux-without-react-223n), but this time we will build the React UI also.

The project would have UI for two types of accounts: Current and  Savings. There would also be a list of bank customers.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfi3kmshcrt2yqtpzi34.png)

To get started we need to install below dependencies. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnpkax5gx5v5hbdq1w08.png) 
 
Here is how the directory structure of the project would look like:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm8mo9dpj2ilxn47p3kp.png)

In the [previous](https://dev.to/bhupendra1011/understanding-redux-without-react-223n) , we have already seen how to setup action creators, reducers and combining reducers.
Here is how the redux store looks like now:
```js
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import logger from "redux-logger";
import rootReducer from "./rootReducer";

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(logger, thunk))
);

export default store;
```
Store instance would be passed down the components tree via Provider
```js
import { Provider } from "react-redux";
import store from "./redux/store";

export default function App() {
  return (
    <Provider store={store}>
      <div className="App">   
      ...    
      </div>
    </Provider>
  );
}
```
To subscribe to the store we would be using *useSelector* hook and to get the dispatch function we would require *useDispatch* hook. Earlier `connect` function was difficult to setup with Typescript but now these hooks provide easy TS integration.

```js
export default CurrentAccounts = () => {
  const amount = useSelector((state) => state.current.amount);
  const dispatch = useDispatch();

  return (
    <div>
      <label>Current Account</label>
      <h3>{amount}</h3>
      <div>
        <button onClick={() => dispatch(withdrawMoneyCurrent())}>
          Withdraw
        </button>
        <button onClick={() => dispatch(depositMoneyCurrent())}>Depoist</button>
      </div>
    </div>
  );
};
```
**Async Action Creator**
We have used *redux-thunk* to call the dispatch function with actions in case of loading, success, error state for fetching data.
```js
export const fetchCurrentUsers = () => {
  return function (dispatch) {
    dispatch(fetchStatusLoading);
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        const data = res.data.map((item) => ({ id: item.id, name: item.name }));
        dispatch(fetchStatusSuccess(data));
      })
      .catch((error) => {
        dispatch(fetchSatusError(error.message));
      });
  };
};

``` 
👇 Here is the complete sandbox to practice above concepts
{% codesandbox understanding-react-redux-esecy %}

And if you have [Redux Dev Tools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) chrome extension , then you can replay the state transitions , dispatch custom functions  and generate tests.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d74vn0172o2iwne4hc02.png)
If you are using redux only to fetch data and save it to a centralized store then there is an another way to do it with more efficient cache performance and less code  ~  [Redux Query](https://react-query.tanstack.com/). Dan's [blog](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) on when not to use Redux is also a worth to read.

---