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

https://unsplash.com

📄 Table of contents

“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 🔻

2. Set up your components and Layout 🔻

3. Set up routing 🔻

4. Set up Redux store 🔻

🔖 Image credit to JS Lancer
  • create or fetch your data/content
  • create a (default)state
  • create a store

5. Plan Redux Actions and Reducers 🔻

6. Integrate Store with React Router 🔻

7. Updating State with Reducers 🔻

  • 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 processes and timetravel

Conclusion

Please leave comments, feedback and suggestions as I am always trying to improve.
Share your thoughts - it's never been easier 😄

Dive deeper — some useful links

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store