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.
- 1. Set up your environment 🔻
- 2. Set up your components and Layout 🔻
- 3. Set up routing 🔻
- 4. Set up Redux store 🔻
- 5. Plan Redux Actions and Reducers 🔻
- 6. Integrate Store with React Router 🔻
- 7. Updating State with Reducers 🔻
- 8. Debugging 🔻
- Conclusion
- Dive deeper - some useful links
"In theory there's no difference between theory and practice. But, in practice, there is." ― Jan L. A. Van De Snepscheut, Computer Scientist
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.
When creating your Components and how the fit together remind yourself to think in React.
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.
- 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.
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.
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>.
Every time you run an action, every reducer is going to run and actions will be dispatched.
- the
connectmethod of React-redux allows to pass props to a component bindActionCreatorswrap action objects into dispatch calls, so that they may be invoked directly.mapStateToPropsandmapDispatchToPropsconnect the data from the store to a certain component.- render state into components with
this.propson 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
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
- 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
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 😄