Created by ReactJSExample https://github.com/reactjsexample
Full source code available at https://github.com/reactjsexample/react-redux-simple-example
If you are new to React Redux, this project is a quick and easy way to learn React Redux.
- Uses Large Scale Architecture for Redux.
- Does not explain, just shows the code.
- Gives you 1 way, using the latest coding techniques.
- Lets you compare the same app without Redux to see the differences.
- About The Author
- Project Setup
- How To Convert a React App to Redux
- Software Libraries Used
- Installing The Libraries
JC Lango is a UI Architect and UI Developer for large scale web applications at several Fortune 500 companies.
He is an expert in Angular, Polymer, and React and maintains these sites at Github:
- AngularExample https://github.com/angularexample
- PolymerExample https://github.com/polymerexample
- ReactJSExample https://github.com/reactjsexample
JC may be available to work remote, and can be contacted at these links:
- LinkedIn: https://www.linkedin.com/in/jclango
- Email: jobs@jclango.com
You need to have Node and NPM installed on your PC.
Downloading and installing Node.js and npm
Download the source code using git or else download and unzip the zip file.
Open a terminal window and go to the project root folder.
You need to have npm installed globally.
Run npm i to install the required libraries.
Open a terminal window and make sure you are in the project root folder.
Run the following command for a dev server.
Open your browser and go to http://localhost:3000
The browser will automatically reload if you change any of the source files.
Open the browser's Developer Tools window to see any errors in the Console.
These are the basic steps to convert your existing React app to Redux:
- Install Redux Follow the instructions here.
- Create the appStore.js.
- Add Provider in the index.js.
- For each component:
- Create a directory for each component.
- Create ?ActionTypes, ?Actions.js, ?Reducer.js.
- Delete all references to "state"
- Change "this.setState()" to "this.props.yourAction()"
- Change "this.state." to "this.props."
- Add mapStateToProps, mapDispatchToProps, and connect.
- In the appReducer, use combineReducers (if you have more than one).
Just take a look at these 2 example apps, in my github:
They are the same application, except one uses Redux.
You can see exactly what changes were done to convert the React app to React Redux.
These are the main packages used in this app:
- ReactJS 16.8.4
- React Redux 7.1.0
For a complete list, see the package.json file.
For installation instructions, see Installing The Libraries
Note: If you have downloaded this project, all the libraries will be installed when you run the npm install as described in the How To Install section above.
In that case you don't need to do any of the following steps.
It is included here, in case you want to build a new project from scratch on your own.
It also provides documentation on each library and its purpose.
There are a few different ways to create your React App.
Start by reading Create a New React App
If you use the Create React App command, it will install the React library packages.
There are several packages you will need to install Redux.
React Redux is Redux for React.
You need to install both Redux and React Redux.
npm i -s redux
npm i -s react-redux
Redux DevTools is a Chrome Extension. You need that for debugging with Redux.
Install it from your Chrome browser.
You will need to modify your code to use this properly.
Note: You should also install the library package.
npm i --save-dev redux-devtools-extension
Then follow these instructions to setup your code to use the plugin most effectively.
After the app is set up and running in Chrome, open the Developer Tools, and then select the Redux top menu tab. You will be able to see the state store.
Prettier is a tool to format your code in a consistent way.
Prettier is not required for this project, but it is a good practice to install it for each project, because it helps to make the code more readable.
npm i --save-dev prettier
Note: --save-dev saves it under the devDependencies section, where it available during development, but not is not used during the build process.
I use JetBrains WebStorm as my code editor, and under Preferences/Tools, I add File Watchers for Prettier that automatically run Prettier on file save.