8 steps to get started with Redux and React - A roadmap ⚛ 💡 🏁

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.

"In theory there's no difference between theory and practice. But, in practice, there is." ― Jan L. A. Van De Snepscheut, Computer Scientist

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.cloneElement will 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 🔻

🔖 Image credit to JS Lancer

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 <Provider>.

7. Updating State with Reducers 🔻

Every time you run an action, every reducer is going to run and actions will be dispatched.

the connect method of React-redux allows to pass props to a component
bindActionCreators wrap action objects into dispatch calls, so that they may be invoked directly.
mapStateToProps and mapDispatchToProps connect the data from the store to a certain component.
render state into components with this.props on each component
pass onClick functions with this.props
handle the click in your according reducer file with copying the old state and setting a new one
as reminder on React ➡️ use ref to 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 process and timetravel

Conclusion

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 😄

⚛️ Introduction to Redux