React Basics - Redux Overview

 

React Basics: React Redux Overview

State management! While it looks like all the cool kids are starting to transition away from using Redux (in favor of the context API) the likelihood that you'll encounter a project that implements Redux is still pretty good. Here is an overview (with the code) of a basic implementation of Redux in (yet another!) counter application. Boring yes, but the points are all explained pretty clearly....

Summary:

This code has been liberated from https://www.youtube.com/watch?v=CVpUuw9XSjY

/index.js

This is the root level index.js.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import allReducer from "./reducers";
import { Provider } from "react-redux";

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();


App.js

First you need to import the react-redux required libraries, then your actions (broken out into their own file for organization purposes). Assign variable names to the state values you want to use in your JSX for display. In the buttons where you need onClick() events call them with the dispatch function.
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementMultiply } from "./actions/index";

function App() {
  const counter = useSelector(state => state.counter);
  const isLogged = useSelector(state => state.isLogged);
  const dispatch = useDispatch();
  return (
    <div className="App">
      Counter: {counter}
      <p>Is user logged in (isLogged var)? {isLogged ? "true" : "false"}</p>
      <br />
      <button onClick={() => {dispatch(increment());
		}}>+</button>
      <button onClick={() => {dispatch(incrementMultiply(5));
        }}>XX</button>
      <button onClick={() => {dispatch(decrement());
        }}>-</button>
    </div>
  );
}

export default App;


/Actions/index.js

The 3 different Actions that we use above are defined collectively here in /actions/index.js.
export const increment = () => {
  return {
    type: "INCREMENT"
  };
};

export const incrementMultiply = nr => {
  return {
    type: "INCREMENTMULTIPLY",
    payload: nr
  };
};

export const decrement = () => {
  return {
    type: "DECREMENT"
  };
};


counter.js

This is the reducer file where the state actually gets changed based on the needs of the application (in this case it's when the user clicks the increment/decrement/incrementmultiply buttons).
//REDUCER - CHANGES THE STATE
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "INCREMENTMULTIPLY":
      return state * action.payload;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

export default counterReducer;


/reducers/index.js

The combineReducers() method is used to aggregate all of the reducers into one file.
import { combineReducers } from "redux";

import counterReducer from "./counter";
import loggedReducer from "./isLogged";

const allReducers = combineReducers({
  counter: counterReducer,
  isLogged: loggedReducer
});

export default allReducers;



 
 
 
Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/react/react-basics-redux-overview/