How & when to use redux in react projects?

So, what is Redux?

React and Redux in action. Open in full-screen to view the app conveniently
npm install redux react-redux @reduxjs/toolkit
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import App from './App';
// main store
const store = configureStore({reducer: reducers });
....
//App component wrapped in Provider
root.render(<Provider store={store}>
<App />
<Provider /> );
import { connect } from "react-redux";const App = () => {
<Tigray />
}
//use connect to get store dataexport defautlt connect()(App);
import React from "react";
import { connect } from "react-redux";

import addCityAction from "./actions/addCityAction";
const Tigray = (props) => {
//props now contain storeState and addCityAction
const { city, description, imgUrl } = props;
const onClick = (e) => props.addCityAction(e.target.value, description, imgUrl, e.target.checked);
};
const mapStateToProps = (state) => ({ storeState: state });
// wire mapStateToProps to the connect function
....
export default connect(mapStateToProps,{addCityAction})(Tigray);
import * as ActionType from "./actionTypes";export default (city, description, img, checked) => {
return {
type: ActionType.ADD_CITY, //required
payload: {city, description, img, checked } //optional
};
};
import * as ActionType from "../actions/actionTypes";
const addCityReducer = (state = {}, action) => {switch (action.type) { case ActionType.ADD_CITY: return { ...state, [action.payload.city]: { selected: action.payload.checked, description: action.payload.description, image: action.payload.img. }}; default:
//return the previous state for any other actions
return state;
}};export default addCityReducer;
import { combineReducers } from "redux";import addCityReducer from "./addCityReducer";export default combineReducers({ addCityReducer });
// main store
const store = configureStore({reducer: reducers });
import React, { useState } from "react";import { Modal, Button } from "semantic-ui-react";import { connect } from "react-redux";const SelectedCities = (props) => {const selectedCitiesList = props.state.addCityReducer;const [open, setOpen] = useState(false);const renderCities = () => {
// keys of the selected list object
const selected = Object.keys(selectedCitiesList);
const count = ("count", Object.values(selectedCitiesList).filter((a) => a.selected === true).length);if (count === 0) { return <div>You have not selected cities</div>;}return selected.map((element) => {
const city = selectedCitiesList[element];
// do not render if not selected
if (!city.selected) {
return null;
}
return (
<div key={element} className="item">
<img className="ui avatar image" src={city.image} alt {element} />
<div className="content">
<div className="header">{element}</div>
</div>
</div> );
});
};
return (<React.Fragment>
<Modal onClose={() => setOpen(false)} onOpen={() => setOpen(true)}
open={open} trigger={ <Button className="floated-action-button">Show my list</Button> } >
<Modal.Header>Your selected cities</Modal.Header>
<Modal.Content>
<Modal.Description>
<div className="ui middle aligned selection list"> {renderCities()}
</div>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<Button color="black" onClick={() => setOpen(false)}>
Close
</Button>
</Modal.Actions>
</Modal>
</React.Fragment>
);
};
const MapStateToProps = (state) => ({ state: state });
export default connect(MapStateToProps)(SelectedCities);

Conclusion

--

--

--

A front-end engineer interested in javascript and UX design

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learn Cypress.io the hard way: Manipulate URLs and links

Image 2 Drive and Cell. HTML-Form

An easy and short introduction to TypeScript Generics

A bubble sort visualizer using React Hooks -Useffect, UseState

Using JavaScript to Work with Spreadsheets, Part 1: The Shape of the Data

Best Practices for building Angular Schematics

Singly Linked List in JavaScript

How to structure your react app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bahta T.

Victor Bahta T.

A front-end engineer interested in javascript and UX design

More from Medium

React Components

How to test custom React Apollo hook using Jest Mock

Utilizing Typescript In React