Mock state and Redux
Workflow of front-end developer most of the time looks this way:
- take specs from designer 🙄
- analyze the specs and think how you will integrate this into your app🤔
- write actions😐
- possibly make tests for reducer 🤨
- write reducers😎
- start making components and styles🙃
At the point when you start making component and styles, you need state in your reducer since you need some data for your components. In this article, I will show you how a mock state can help you in this situation.
At first, we will create an object with the mock state of the redux app.
In order to inject this state into the store, we need to place this piece of code in the app initialization part. If you use create-react-app place it at the end of App.js file. In this code, we go through each reducer state and replace its value with mock one.
As you can see from the snippet we need to tell our app that we are running a mock version by using env variable — REACT_APP_MOCK. In order to set this variable, we can create command in the package.json which will set this variable before running development server.
“mockrun”: “REACT_APP_MOCK=true react-scripts start”
For Medium readers, I provide a Udemy course How to Start React Project: Best Practices for 9.99$. The goal of this course is to share with You my findings of the last few years about what steps and decisions are better to make at the beginning of development so that you will have a good starting point for your new project.
Reach the next level of focus and productivity with increaser.org.
