In “Understanding MVC Architecture with React” I came to the conclusion that Redux seems to be the perfect fit for structuring apps with React. Now I want to provide a roadmap on how to use it in practice. As a reminder: Redux builds on Flux as a refined MVC pattern and allows to manage the state out of one hand.
📄 Table of contents
“In theory there’s no difference between theory and practice. But, in practice, there is.”
1. Set up your environment 🔻
Set up your desired environment. React boilerplates ➡️ are a great way to get going. Be sure to understand the corresponding bundler at least a little bit.
2. Set up your components and Layout 🔻
When creating your Components and how the fit together remind yourself to think in React.
3. Set up routing 🔻
React Router is the perfect tool for switching content components in your main components. Get yourself comfortable with the React Docs and understand how to handle and fit elements together (e.g.
Clone and return a new React element using element as the starting point. The resulting element will have the original element's props with the new props merged in shallowly.).
React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what’s being displayed on the page.
Be sure to include
this.props.children in your main component that is rendered in your main path, so props can be passed downwards.
4. Set up Redux store 🔻
- create or fetch your data/content
- create a (default)state
- create a store
Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.
- if you want to sync history with store, use syncHistoryWithStore
This library helps you keep that bit of state in sync with your Redux store. We keep a copy of the current location hidden in state.
5. Plan Redux Actions and Reducers 🔻
Set actions to handle data that is created in user interaction (e.g. clicking “like”).
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().
Set reducers to change the state accordingly to the happened actions. A reducer takes the action and a copy of the current state. Create a reducer for each state and combine all of them in a main reducer.
6. Integrate Store with React Router 🔻
Use react-redux to implement the state into the React router.
Redux works especially well with libraries like React and Deku because they let you describe UI as a function of state, and Redux emits state updates in response to actions.
Connect the router to the store with
7. Updating State with Reducers 🔻
Every time you run an action, every reducer is going to run and actions will be dispatched.
connectmethod of React-redux allows to pass props to a component
bindActionCreatorswrap action objects into dispatch calls, so that they may be invoked directly.
mapDispatchToPropsconnect the data from the store to a certain component.
- render state into components with
this.propson each component
- pass onClick functions with
- handle the click in your according reducer file with copying the old state and setting a new one
- as reminder on React ➡️ use
refto get the data of the input field
- practical tip ➡️ get your data first, then render it out in JSX
- split up reducers with reducer compositions and handle just a slice of the state
- to get data asynchronously use redux-thunk or redux-saga for example
8. Debugging and Monitoring🔻
- use the React Developer Tools
- Sentry provides a lot of error tracking features
- to hotreload reducers: recompile the root reducer and change the store, with accepting the hotreload and re-requiring the reducer.
- use the Redux Developer Tools to visualize the reducer processes and timetravel
I wrote this roadmap while I was creating the “Reduxstagram”-App. I think it’s one of the better tutorials, as usual from Wes Bos, however I realized it’s absolutely necessary to read the docs to understand the concept of Redux with React. I have also realized that my knowledge on React is also not good enough — make sure to be confident with React alone.
I used the roadmap as guide for another app and it gave me a good direction for setting up a basic structure.
Please leave comments, feedback and suggestions as I am always trying to improve.
Share your thoughts - it's never been easier 😄