Note: This post is not meant to be about the inner workings of React, Redux or\nReact-Router. This is a post detailing my experiences & understanding in\ncreating an app using all 3 libraries, the problems I faced while doing it & how\nI got around them.
\nSome background info on me, professionally I am a backend developer who\nprimarily works with Java. I have worked with Apache\nWicket for a long time. For those who don’t know\nWicket is a web framework for Java with components at its center. So when I\nwanted to learn a JavaScript frontend library/framework, I chose React as it was\nsimilar to Wicket in terms of creating components and composing them to create\nviews while being lightweight enough that it was easy to learn in isolation.
\nTo start learning React, I made Snooplay: A media\nplayer for Reddit. The first version of Snooplay was very simple, it just used\nReact, no routing & no state management. You can checkout the code for v1\nhere.
\nIn order to extend my knowledge to Redux, Middlewares & React Router, I decided\nto extend Snooplay with the following goals —
\nNow that we know, what our goals are, lets get started. Here is some information\non important packages —
\nYou can checkout the full package.json file\nhere.
\nWe will create the structure of the app by using Facebook’s create-react-app\n(CRA) tool. After your install CRA, go to your terminal and type the following\ncommand —
\ncreate-react-app <app_name>create-react-app is a utility that creates a pre-configured project with Webpack\n& Babel and other tools. This was made to get over the configuration issues that\npeople usually face while wiring up different tools together.
\nThis process can take some time, once it finishes you can cd into the\ndirectory and type npm start This would open your browser and you should be\nable to see the React App.
The entry point for the app is index.js which then renders the <App />\ncomponent from app.js .
Now we need to install our essential libraries i.e. React-Router & Redux.
\nnpm install --save redux react-routerBoth React-Router & Redux are very modular libraries. For example, React-Router\ncan also be used in React-Native projects, whereas Redux has no direct\nconnection with React. To make it easy to use these libraries we will install 2\nmore libs.
\nreact-redux: Helps connect our components with redux, thus making it easy to\nread & change state from React components.
\nnpm install —save react-router-dom react-redux
\nThis step was very tricky, with many resources on the web. Some worked with\nWebpack 1 & not with Webpack 2 while some refused to work at all.
\nnpm install --save-dev css-loader extract-text-webpack-plugin node-sass sass-loaderBefore we update our webpack configs, we need to *eject *our project. Eject\nbasically means that we will now take care of the webpack & other config instead\nof just working with what create-react-app gives us. To eject the project just\nrun the following command —
\nnpm run ejectAfter this process is completed, you will find a config folder which would\ncontain 2 webpack files, one is _webpack.config.dev.js _& other is\n*webpack.config.prod.js. *As you might have guessed, the dev file your\ndevlopment profile (used when you do npm start ) and the prod file is your\nproduction profile that performs optimizations before creating a deployment\nbundle (run npm run build )
Now in our webpack.config.dev.js we will configure the\nextract-text-webpack-plugin to handle the scss files.
3.1) Get the extract — text plugin in the file.
\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');Also declare the CSS file name -
\nconst cssFilename = 'static/css/[name].[contenthash:8].css';3.2) Configure rules
\nIn the module.exports object, find the module property. In the rules array\nyou need to find the following section —
// \"oneOf\" will traverse all following loaders until one will // match the requirements. When no loader matches it will fall // back to the \"file\" loader at the end of the loader list. oneOf: [\n....\n]Here add the config to process scss files using appropriate loaders.
{\ntest: /\\.scss$/,\nuse: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) },Note: Several examples on the internet use the loaders syntax, but that is\ndeprecated.
\nAlso, you should comment out the css loader that is pre-configured in the\nfile.
Before going forward here, I would like to mention 2 resources that helped me\ngreatly in understanding Redux & Thunks.
\nAn introduction to the various terms you are going to see moving forward in\nreference to Redux.
\ntype property which helps\nreducers in deciding if they have to respond to this action or not. Function\nthat return actions are called action creators.dispatch & getState store functions which allow you to further call\nactions from inside the function. Example of such action creator —Example of using Redux-Thunk
\nI would like to outline the process that I used to create my store.
\nBind reducer & properties. This is how the state for Snooplay looks
\n//As you can see, each property is assigned a reducer.\nconst rootReducer = combineReducers({ currentPost: ReducerCurrentPost,
\nposts: ReducerFetchPosts,\nsubs: ReducerFetchSubreddits,
\ncurrentSub: ReducerCurrentSubreddit, loaderVisible: ReducerLoadingState, notification: ReducerNotification, lastPostId: ReducerLastPost\n});
Provider component provided by react-redux package.Now that we have linked our properties with our reducers, I would like to point\nout that in our reducer functions, the _state property refers to the value\nof the property only and not the entire state_. For example, here is my\nReducerCurrentPost-
// here the state is the value of ‘currentPost’ property of the app // state and not the entire state.\nexport default function currentPostReducer(state = null, action) {
\n}
\n**Actions & Action Creators. **As described earlier the action is simply a JS\nobject with a type field. Any data that has to be sent to the reducer can be\nsent as the payload property of the action. Here is what the action creator to\nset the current post look like-
\n//This is an action creator, returns an action with a type and //payload.\nexport const setCurrentPost = (post) => {\nreturn {\ntype: ACTIONCURRENTPOST,\npayload: post\n}\n}
\nWhen this action is dispatched (called) like setCurrentPost(post) redux sends\nthis action to all reducers. The the current post reducer can respond like-
import { ACTION_CURRENT_POST } from './../Constants';\n\nexport default function currentPostReducer(state = null, action) {\n switch (action.type) {\n //This reducer checks the current action type\n //Returns the post (payload)\n //This post is updated in the state\n case ACTION_CURRENT_POST: {\n return action.payload\n }\n default: {\n return state;\n }\n }\n}Next, we want our components to update when the associated state is changed. So\nlets say we have a component which displays the current post. When the reducer\nupdates the current post in the state, we want this component to re-render to\nshow the new post. This is where the connect method from the react-redux\nlibrary comes into play. It connects the react components with its associated\nstate.
Note: In react world, components which work directly with the store are called\nContainer Components and components which work only on the given props\n(irrespective of where the props are supplied from) are called Presentation\nComponents.
\nThis is what my PostContainer component looks like. It is directly connected to\nthe store —
\nimport React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { setCurrentPost } from './../../actions/';\n\nclass PostContainer extends Component {\n render(){\n return(<h1>{this.props.post.title}</h1>)\n }\n}\n\nfunction mapStateToProps(state){\n return {\n post: state.currentPost\n }\n}\n\nfunction mapDispatchToProps(dispatch){\n return {\n actions:{\n closePlayer: bindActionCreators(setCurrentPost, dispatch)\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)PostContainer);So whats happening here?
\nHere we create a Component that has to render some details about the current\npost of the application.
\nmapStateToProps is responsible for taking the entire application state and\nthen getting out the relevant pieces needed to render the current component.\nThese pieces are then provided to the components as props currentPost property of the application state is accessed using\nthe standard props mechanism.mapDispatchToProps is used to call actions from inside the component. In the\nabove example, I use the setCurrentPostaction to close the player. you can\ncall the setCurrentPost action by calling\nthis.props.actions.closePlayer(null) .connectto wire all these together. Now whenever the\ncurrentPost property is updated in the state, PostContainer will be updated\nto reflect this change.Note: if you are wondering why to use mapDispatchToProps — Read this\nStackOverflow answer
\nAfter this you can setup React-Router. There are many great examples/guides on\nhow to do this. Just note that do not follow a react-router v3 guide if you are\nworking with v4 as v4 is a complete re-write.
\nReact Router setup was a breeze, one thing that bugged me was navigating to\npaths programmatically. To do this in v4, I have used the withRouter Component\nfrom react-router-dom package. This is what it looks like —
import React, { Component } from 'react';\nimport { withRouter } from 'react-router-dom'\n\nclass SubmitLink extends Component {\n\n handleClick = () => {\n if (this.props.onClick()) {\n this.props.history.push(this.props.navigateTo());\n }\n }\n\n render() {\n return (\n <a onClick={this.handleClick} className=\"button\"> {this.props.label}</a>)\n }\n }\n}\n\nconst NavigableSubmitLink = withRouter(SubmitLink);\n\nexport default NavigableSubmitLink;This component first calls the onClick property, if that function returns\ntrue, then it calls the navigateTo function which returns the new path that it\nhas to go to after computation. Using withRouter gives us access to updated\nmatch, location, and history props.
Ending Notes —
\nThat’s the end of this article, I have tried to explain all the problems I faced\nand how I overcome them. If you want to more detailed explanations of React,\nRedux & Redux-Thunk, look at the resources I have linked above.
","frontmatter":{"title":"Dev Diary: My React, Redux & React Router Setup.","date":"August 23, 2017","ogimage":null}}},"pageContext":{"slug":"/react-redux-setup/","previous":{"fields":{"slug":"/in-search-of-code-buddy/"},"frontmatter":{"title":"In Search of a Code Buddy - Adventures of a lonely programmer"}},"next":{"fields":{"slug":"/bolt-content-and-relations/"},"frontmatter":{"title":"Bolt CMS: Using content types and relations"}}}},"staticQueryHashes":["426816048","983108779"]}