how to make React Redux application work with fixture data?

Question

How to configure react redux application to work with dummy data (fixtures) till the time server API is ready ? Once API are ready flip the switch and it starts working on the server API for fetching data instead of dummy data(json files).

Answer 1

The answer to your question is initialState. When you create your Redux store you can pass an initialState to it. Here are some docs on createStore.

You may optionally specify the initial state as the second argument to createStore().

Also here is a stack overflow question similar to yours

Answer 2

If you want to store some fixed data until you fetch your data to be updated is

using Initializing State

then using React Lifecycle Method componentDidMount() to fetch the data.

Answer 3

One option is to use this webpage as a fake backed. It returns dummy data for REST requests. Once your real backend is ready, just change the endpoint in your code.

Answer 4

The non React-Redux part:

You're going to want to make an api for your application.

import fakeData from './fakeData.json';

const api = {
    getTodos: function() {
        return new Promise((resolve, reject) => {
            resolve(fakeData.todos);
        });
    },
    ...
};

This way you can import the api methods into your components and use a method to access your data. This is good because now the components don't care about how the data is retrieved, just that it is accessed through that method with a certain signature.

Now you can use that method throughout your code, and when you have a backend you just change the implementation of the methods on the api object.

The React-Redux part:

If you would like to seed your application with state, you can do this in the createStore method; Which takes an optional second argument, preloadedState. Read about here Initializing State in the official Redux documentation.