React-Redux: Line-by-Line

Shorthand reasoning through the start of a basic React app

Image for post
Image for post
Photo by cottonbro from Pexels
//src/index.jsimport React from 'react';
// The react-dom package provides DOM-specific methods that can be used at the top level of an app (React documentation)import ReactDOM from 'react-dom';
// "When used with React, a <Provider> exists to wrap the application, and anything within the Provider can have access to Redux" (tutorial, Tania Rascia)import { Provider } from 'react-redux';
import store from './store.js';
import App from './App';
import './index.css';
// Anything within the provider can have access to ReduxReactDOM.render(
<Provider store={ store }>
<App />
</Provider>, document.getElementById("root")
// src/js/store/index.js// Store -- JS object that holds a Redux app's state. 
// Props -- data passed from parent
// State -- mutated data (updated props via a click, for example)
// compose lets you enhance a store with applyMiddleware and dev tools (React documentation)import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers/index";
// Thunk handles asynchronous calls when working with Redux:
// a. dispatches an action, tells user we're loading the data,
// b. makes a request to the API,
// c. waits for the response and then dispatches another action
with the response data
import thunk from "redux-thunk";
// More information on
storeEnhancers
const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// Initialize the store with a reducer function (here, rootReducer), passed to createStore. Store handles all dispatched actions and calculates an entirely new state every time (Redux documentation, Learn.co)const store = createStore(
rootReducer,

// storeEnhancers is used with
Redux devtools
storeEnhancers(applyMiddleware(thunk))
);
export default store;
//src/reducers/index.js// Reducer -- a JS function with two parameters: current state and action. When an action is dispatched, the store forwards a message 
(the action object) to the reducer
const initialState = {
stories: []
};
// Initial state is passed in as default parameter. So, this code returns initial state.function rootReducer(state = initialState, action) {
// Checks the action type, "when action is this, do this."
if (action.type === "DATA_LOADED") {
// Returns a new JS object to keep the original state unaltered.
return Object.assign({}, state, {
// This preserves the original array.
stories: state.stories.concat(action.payload)
});
}
// Resulting state is just a copy of the initial state (tutorial, Valentino Gagliardi) return state;
}
export default rootReducer;
// actions signal reducers to produce the app's state
// src/actions/index.js// Actions are JavaScript objects
// Thunk is an NPM package, middleware (
Learn.co)
export function getData() {return (dispatch) => {
dispatch({ type: 'START_ADDING_DATA'});

// fetch() returns a Promise -- "data will be available when we can access it"
fetch('https://two-min-media-api.herokuapp.com/stories')


// then() accesses data when promise resolves, parses it into JSON

.then(resp => resp.json())
// "when we receive the data ..."
// Thunk -- fetch() returns a function (vs. an object). That function receives the store's dispatch function as its argument. With that, we can dispatch multiple actions from inside that returned function. .then(json => dispatch({ type: 'DATA_LOADED', payload: json.data }))
};
}
// Action must be an object with a type property
// Type property, required, drives how the state should change
// Payload property, not required, describes what should change

React-Redux challenges

Ruby, JavaScript, coding, writing

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