Image for post
Image for post

Workflow of front-end developer most of the time looks this way:

  1. take specs from designer 🙄
  2. analyze the specs and think how you will integrate this into your app🤔
  3. write actions😐
  4. possibly make tests for reducer 🤨
  5. write reducers😎
  6. 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.

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

Image for post
Image for post

Written by

Software engineer, creator of More at

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