> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/redux-live-application-day-10/redux-with-existing-application/redux-with-react-app.md).

# Redux with React App

{% embed url="<https://github.com/tkssharma/React-Internal-Workshop/tree/master/Day%2010-%20Redux>" %}

![](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-LkMHTWkNpbN-GwTXw3H%2F-LkMM6zSP-9w-yiyiU2H%2F01.png?alt=media\&token=ce25b435-de3f-416d-9e06-36a65d560672)

![](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-LkMHTWkNpbN-GwTXw3H%2F-LkMMBwOiRMqqTKeMpcB%2F04.jpg?alt=media\&token=8a9f2661-7a6e-42ff-9163-78b0d85059ee)

Add Redux in dependancies&#x20;

```
  "dependencies": {
    "axios": "^0.19.0",
    "jquery": "^3.4.1",
    "prop-types": "15.6.1",
    "react": "16.1.1",
    "react-dom": "16.1.1",
    "react-redux": "5.0.7",
    "redux": "3.7.2"
  }
```

Actions&#x20;

```
// types of action
const Types = {
  CREATE_ITEM: "CREATE_ITEM",
  DELETE_ITEM: "DELETE_ITEM"
};
// actions
const createItem = task => ({
  type: Types.CREATE_ITEM,
  payload: task
});

const deleteItem = id => ({
  type: Types.DELETE_ITEM,
  payload: id
});

export default {
  createItem,
  deleteItem,
  Types
};
```

Reducer&#x20;

```
import ACTIONS from "./action";
import _ from "lodash";

const defaultState = {
  items: []
};

const todoReducer = (state = defaultState, action) => {
  switch (action.type) {
    case ACTIONS.Types.CREATE_ITEM: {
      console.log(action);

      let item = action.payload;
      let newItem = { id: state.items.length + 1, description: item };
      let newState = _.cloneDeep(state);
      newState.items.push(newItem);
      return newState;
    }

    case ACTIONS.Types.DELETE_ITEM: {
      let newState = _.cloneDeep(state);
      let index = _.findIndex(newState.items, { id: action.payload });
      newState.items.splice(index, 1);
      return newState;
    }

    default:
      return state;
  }
};

export default todoReducer;
```

Store&#x20;

```
import { createStore, applyMiddleware } from "redux";

// Logger with default options
import logger from "redux-logger";

import reducer from "./reducer";

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, applyMiddleware(logger));
  return store;
}
```

Higher Order Component&#x20;

```
class ToDO extends Component {
   // TODO
}

const mapStateToProps = state => ({
  items: state.items
});

const mapDispatchToProps = dispatch => ({
  createItem: item => dispatch(ACTIONS.createItem(item)),
  deleteItem: id => dispatch(ACTIONS.deleteItem(id))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(ToDO));
```