Photo by Umberto on Unsplash

Redux with React for Complete Beginners

Why state management is Important

Application without redux
Application with Redux

Let’s create a basic app with react and redux

npx create-react-app react-redux-tutorial
cd react-redux-tutorial
yarn add redux react-redux
npm install redux react-redux
import { combineReducers } from  "redux";
const initialState = {
books: [],
};
function bookReducer(state = initialState, action) {
return state;
}
const rootReducer = combineReducers({
bookReducer,
});
export default rootReducer;
import { createStore } from  "redux";
import rootReducer from "./root-reducer";
export const store = createStore(rootReducer);
import  React  from  "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./redux/store";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
export  const  actionTypes  = {
ADD_BOOK: "ADD_BOOK",
};
import { actionTypes } from  "./types";
export const addBooksToState = (data) => ({
type: actionTypes.ADD_BOOK,
payload: data,
});
import { combineReducers } from  "redux";
import { actionTypes } from "./types";
const initialState = {
books: [],
};
function bookReducer(state = initialState, action) {
switch (action.type) {
case actionTypes.ADD_BOOK:
return {
...state,
books: [...state.books, action.payload],
};
default:
break;
}
return state;
}
const rootReducer = combineReducers({
bookReducer,//you can add more reducers here
});
export default rootReducer;
const  mapStateToProps  = (state) => ({// you can do destructuring
//here
books:state.bookReducer.books
})
const mapDispatchToProps =(dispatch)=>( {
addBooksToState:(book)=>dispatch(addBooksToState(book))
// you have to import the actions
})

Optional Section: A fully functional app with the redux setup

import  React  from  "react";
import { connect } from "react-redux";
const Books = ({ books }) => {
return (
<div>
<h1>Books List</h1>
<ul>
{books.map((book, index) => (
<li key={index}>{book}</li>
))}
</ul>
</div>
);
};
const mapStateToProps = (state) => ({
books: state.bookReducer.books,
});
export default connect(mapStateToProps)(Books);
import  React  from  "react";
import { connect } from "react-redux";
import { addBooksToState } from "../redux/actions";
const BooksInput = ({ addBooksToState }) => {
const handleKeyPress = (e) => {
if (e.key === "Enter") {
addBooksToState(e.target.value);
document.getElementById("book-input").value = "";
}
};
return (
<div>
<h2>Add your books here</h2>
<input id="book-input"
type="text"
onKeyUp={handleKeyPress} />
</div>
);
};
const mapDispatchToProps = (dispatch) => ({
addBooksToState: (book) => dispatch(addBooksToState(book)),
});
export default connect(null, mapDispatchToProps)(BooksInput);
import  React  from  "react";
import "./App.css";
import Books from "./components/books";
import BooksInput from "./components/books-input";
function App() {
return (
<div className="App">
<Books />
<BooksInput />
</div>
);
}
export default App;
case  actionTypes.ADD_BOOK:
if (!state.books.includes(action.payload)) {
return {
...state,
books: [...state.books, action.payload],
};
}
return state;

--

--

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