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 }
case GET_USERS:
return {...state, users: action.users}
default:
return state;
}
};
./actions/user.jsimport axios from 'axios'export const axiosFetchUsers = (users) => {
return dispatch => {
axios.get('http://localhost:3000/api/users')
.then(response => {
dispatch(getUsers(response.data))
})
.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

Conclusion

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/