Why You Should Learn Redux for React

React + Redux — Source

What is Redux?

Redux Architecture Diagram — source

The Three Parts of Redux

Action, Reducer, Store — source
{type: ADD_USER , username: 'a username', password: 'a password' name: 'a name'}
function addUser(username, name, password){
return {type: ADD_USER, username: username, password: password, name: name}
./reducers/userReducer.jsexport default function manageUsers(state = {
users: [],
newUser: {
username: '',
password: '',
name: ''
}, action){
switch (action.type) {
case ADD_USER:
return {...state, newUser: action.newUser }
return {...state, users: action.users}
return state;
./actions/user.jsimport axios from 'axios'export const axiosFetchUsers = (users) => {
return dispatch => {
.then(response => {
.catch(e => console.log(e))
export function getUsers(users) {
return { type: GET_USERS, users: users }
Redux Pattern: Component -> dispatches ACTION -> to REDUCER -> updates data in STORE -> re-renders Component — Source

Benefits of Redux

React vs Redux data flow — source


Great Resources



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
Tiffany Abraham

Full-stack developer. Alumna of Flatiron School's Software Engineering Immersive bootcamp. Portfolio: https://tiffany-codes.com/