Principles of Redux and React/Redux
Understanding state management, store, middleware, and more
When first learning about Redux, I was confused by the concept of state. What exactly is state or state management?
State management is a way to create an easy means of communicating and sharing data across components. Keeping track of our state creates a data structure tree that you can access and change through a unidirectional flow.
Redux is a great state management tool that creates consistency within an application. One of the core principles is that the state is a plain JavaScript object where all the data is kept. The state of an application is kept in a store where any component can access any state by using the <Provider><Provider/> tags in the Index.js and importing {connect} from “react-redux” (in the needed components) to allow React and Redux to “talk” to one another.
//index.jsimport React from 'react';import ReactDOM from 'react-dom';import { Provider } from "react-redux";import { createStore, applyMiddleware } from "redux";import thunk from "redux-thunk";const store = createStore(concertsReducer, applyMiddleware(thunk));
ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById("root"));
In the code above is the index.js which is the top most level of your application. In the first few lines we are importing React and ReactDOM. ReactDOM is a package that lets us use DOM specific methods in top level of our app to efficiently manage DOM elements on the web page. To set up Redux, we import it through our main file known as the index.js. Redux is set up through functions such as {connect} (*not shown in this file*), <Provider></Provider>, createStore, applyMiddleware, and thunk.
-{connect} and <Provider></Provider> : give components access to the redux store
-thunk middleware : middleware that allows us to make asynchronous actions within Redux
- also used for return functions that lets us work with promises and delayed actions
-store: where state is stored
-reducer: takes a state and an action and reduces it into a new state
import React, { Component } from "react";import { connect } from "react-redux";import { fetchConcerts } from './actions/ConcertActions'import { BrowserRouter as Router, Route } from "react-router-dom";import './index.css';import './App.css';import Home from "./containers/Home";import About from "./containers/About";import Header from "./components/Header";import NavBar from "./components/NavBar";import ConcertForm from "./components/forms/ConcertForm";import ConcertList from "./containers/ConcertList";import Concert from "./containers/Concert"import InputCount from "./components/InputCount";class App extends Component {componentDidMount() {this.props.newFetchConcertsWithDispatchFn()}render() {console.log(this.props)return (<Router><div className="app"><NavBar /><Header /><Route path="/" component={Home} /><Route path="/create" component={ConcertForm} /><Route path="/about" component={About} /><div style={{ paddingLeft: "900px" }} className="concert-list"></div><div><InputCount /></div><ConcertList /></div></Router>);}}const mdp = (globalDispatch) => {return {newFetchConcertsWithDispatchFn: () => globalDispatch(fetchConcerts())}}const msp = (globalState) => (globalState)
export default connect(msp, mdp)(App);
If we recall the <Provider></Provider> from index.js, we know that it grants us access to the redux store. The {connect} function at the bottom of the App.js also connects a React component to a Redux store. <Provider></Provider>: grants access to the redux store to anything wrapped in a connection function. By using {connect} we are able to provide a component with the data it needs from the store and the functions to dispatch actions from the store. In this case we are putting MapStateToProps and MapDispatchToProps as arguments for {connect}.
MapStateToProps() is a function that gives us access to the global state and store
MapDispatchToProps() is a function that lets us update and manipulate global state
If we look at the code above, the mapStateToProps() grants us access to the state of our application. While mapDispatchToProps() takes in the argument of a global dispatch action (or a change in state), returns a new fetch request from our API and creates a new state which would show the newly updated array of concert objects.
To view the whole Rails API Backend and React/Redux frontend project, check out TicketTracker here.
