DEV Community 👩‍💻👨‍💻

Doug Jones
Doug Jones

Posted on

WHAT THE REDUX


Image description

What Is Redux?

Redux is a JavaScript library for maintaining and centralizing state.

What is State?

To keep it simple State is data that we store and update.

Redux Flow

One of the first this to keep in mind is that our store, reducers and actions are all function that connect and help us control our data flow in Redux.

Image description

Store

  1. Our store takes in a reducer.
  2. We use the Redux devtools to be able to view the state of our store and each action that is dispatched. Make sure to download the redux devtools extension for your browser in order to check on the status your state
  3. As alternative to redux devtools extension in our store. I posted a link to ComposewithDevTools. Which can be use in place of the redux devtools line in our store. Check section 1.3 for more details. ComposeWithDevTools
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import Reducer from "./reducers/Reducer";
import App from "./App";

const store = createStore(
  postsReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <App store={store} />,
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

Reducers

  1. Our reducers takes in a initial state set to an empty array, and a action.
  2. We have a switch/case statement Which is like an if, else statement. Our state will update based on this condition we set in our switch/case statement.
  3. We then return the updated state. We never mutate the original state. We only update the state in our reducer
  4. We always set a default return state.
export const postsReducer = (state = [], action) => {
    switch(action.type){
        case 'FETCH_POSTS':
            return [...state, action.payload]
            default:
                return state 
    }
}
Enter fullscreen mode Exit fullscreen mode

Actions

  1. Our action is where we make our async calls.
  2. They take in a dispatch as an argument.
  3. Our fetch will retrieve our information from an endpoint and return a promise.
  4. We then take the response and turn it into json(JavaScript Object Notation).
  5. we take that and dispatch it to type and return the payload. If you take a look at our dispatch type of FETCH_POSTS you will see it matches our case in our switch/case statement in our reducers
export const fetchPosts = () => {
    return (dispatch) => {
        fetch('endpoint')
        .then(resp => resp.json())
        .then(posts => dispatch({ type: 'FETCH_POSTS', payload: posts}))
    }
}
Enter fullscreen mode Exit fullscreen mode

This is just a simple example of the Redux flow. I hope this give you a good starting point into the world of Redux.

Happy Coding 🧑🏾‍💻👩🏾‍💻👨🏻‍💻👩‍💻

Top comments (2)

Collapse
 
phryneas profile image
Lenz Weber

Please note that this is generally a very outdated style of Redux that is great to understand how Redux works internally, but not how we recommend writing Redux nowadays.

In a production app, you should be using Redux Toolkit, which does not have switch..case reducers, ACTION_TYPEs, or immutable reducer logic. It also does not use combineReducers or createStore.

I would recommend following redux.js.org/tutorials/essentials/... to get up to speed with modern Redux.

Collapse
 
codejones profile image
Doug Jones

Thank You. I'm new to Redux so I appreciate the link. I will definitely check it out.

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.