DEV Community: Cristina Radulescu

Migrating a React application from Reflux to Redux

Cristina Radulescu — Fri, 24 Apr 2020 11:18:37 +0000

In this article I will describe how you can migrate a React application from Reflux to Redux with two example projects. In the first part of the article I will describe how state management looks in Reflux and compare it to the state management in Redux. This kind of migration is useful in larger projects where working with Reflux becomes complicated to maintain, because of React components which start listening to changes coming from multiple stores, which makes the code difficult to understand and to extend 💥. Therefore, migrating to Redux might be a better choice 💪. In the last part of the article I will show the Redux actions and state in the Redux DevTools plugin. For the calls to the server I will be using mock server. In order to better understand this article, some basic understanding of React, Reflux and Redux is needed, because the ideas that are presented are relying on basic information about React components, Reflux and Redux state management.

In Reflux we have three important components: stores, actions and view components. The view components trigger actions, the stores listen to actions and the stores update the view components with new data.

The state management in Redux is very similar to Reflux, the main difference being the use of reducers.

I identified the following steps during the migration process.

Store creation

Reflux
The EventsStore listens to the loadEventsDetails action, which is being called by the view component. When the action is called the store is calling an async method which loads the event list from the server and then sets the event information on the state. In order to notify the view components that listen to the store the trigger method must be called.

let state = "EMPTY";
let eventsInformation = [];

const EventsStore = Reflux.createStore({

    init() {
        this.listenTo(EventsActions.loadEventsDetails, this.onLoadEventsDetails);
    },

    async onLoadEventsDetails() {
        try {
            const response = await axios.get('http://localhost:8080/allevents');
            this.updateEventsInformation(response.data);
        } catch (error) {
            this.setError();
        }
    },

    startLoading() {
        state = "LOADING";
        this.trigger();
    },

    updateEventsInformation(events) {
        state = "LOADED";
        eventsInformation = events;
        this.trigger();
    },

    getEventsInformation() {
        return eventsInformation;
    },

    getState() {
        return state;
    },

    setError() {
        state = "ERROR";
        this.trigger();
    },

});

Redux
Store creation in Redux is very similar to the store creation in Reflux. We will create the store in the EventsConnector and since we will use sagas for async calls to the server, what we need to do is to create a saga middleware and connect it to the store and enhance it with the Redux DevTools so that we can see in the Google Chrome plugin the evolution of the state. By using the Provider from the react-redux module we are sending the store to the AllEvents container where we are mapping the state to props and the dispatch to props and connect it to the AllEvents view component which will be rendered. We need to add all the sagas in the rootSaga so that our saga middleware knows about our sagas. Sagas will not be run though, but will run only when we will dispatch an action which will trigger the saga.

export const sagaMiddleware = createSagaMiddleware();
const appliedMiddleware = applyMiddleware(sagaMiddleware);

const enhanceWithDevTools = composeWithDevTools(appliedMiddleware);

const store = createStore(rootReducer, undefined, enhanceWithDevTools);

sagaMiddleware.run(rootSaga);

export const EventsConnector = (props) => (
    <Provider store={store}>
        <AllEvents {...props}/>
    </Provider>
);

export default function* rootSaga(): * {
    yield all([
        fetchAllEvents(),
    ]);
}

Action creation

Reflux
In the actions file I defined one action on which the events store is listening to. The action needs to be created with Reflux.createActions. In this file, multiple actions could be added.

const EventsActions: Object = Reflux.createActions({
    loadEventsDetails: {},
});

Redux
By looking at the actions in Reflux I will create actions in Redux. We need to load the events from the server and for that we will create three actions to do the following:

loading events
finish loading events
setting an error

export const FETCH_EVENTS = "FETCH_EVENTS";
export const FINISH_FETCHING_EVENTS = "FINISH_FETCHING_EVENTS";
export const SET_ERROR = "FINISH_FETCHING_EVENTS";

const createAction = (type, data) => ({ type, data });

export const startFetchingEvents = () => createAction(FETCH_EVENTS);

export const finishFetchingEvents = (events) => createAction(FINISH_FETCHING_EVENTS, events);

export const setError = (error) => createAction(SET_ERROR, error);

After each action is dispatched the reducer updates the state in Redux. In the reducer we are defining the initial state.

variable which identifies if we have a loading LOADING state while waiting for the server response and or a LOADED state
variable which holds information about events
error variable

Everytime the state is updated the components which depend on that state are rerendered.

export const initialState = {
    state: null,
    events: [],
    error: null,
};

export const eventReducer = (state = initialState, action) => {

    switch (action.type) {
        case FETCH_EVENTS:
            return {...state, state: "LOADING"};
        case FINISH_FETCHING_EVENTS:
            return {...state, events: action.data, state: "LOADED"};
        case SET_ERROR:
            return {...state, error: action.data, state: "ERROR"};
    }
    return state;
};

export const rootReducer = combineReducers({
    eventDetails,
});

The root reducer is combining multiple reducers, in our case we only have one reducer. The structure of the root reducer is determining the path to the state variables which is used in the container to retrieve the state from Redux.

API Calls

Reflux
Server calls are done directly from the store.

…
    async onLoadEventsDetails() {
        try {
            const response = await axios.get('http://localhost:8080/allevents');
            this.updateEventsInformation(response.data);
        } catch (error) {
            console.error(error);
            this.setError();
        }
    },
…

Redux
We will create a saga for each method which does a server call in the Reflux EventsConnector. The asynchronous calls will be done with axios.

export function* fetchAllEventsEffect(action): * {
    try {
        const response = yield call(fetchEvents);
        yield put(finishFetchingEvents(response.data));
    } catch (e) {
        yield put(setError(e));
    }
}

export default function* fetchAllEvents(): * {
    yield takeLatest(FETCH_EVENTS, fetchAllEventsEffect);

}

export function fetchEvents() {
    return axios.get('http://localhost:8080/allevents');
}

The saga will be called when the FETCH_EVENTS event is called. The AllEventContainer maps the state in Redux to props and the dispatching of the actions to props and connects it to the React component which gets rendered.

export const mapStateToProps = (state) => ({
    events: state.eventDetails.events,
});

export const mapDispatchToProps = (dispatch) => ({
    fetchAllEvents: () => dispatch(startFetchingEvents()),
});

export default connect(mapStateToProps, mapDispatchToProps)(AllEvents);

The response received from our mock server looks like this:

[
    {"id": 1, "name": "React Beginner Workshop", "description": "Curious about React? Join us for React Essentials."},
    {"id": 2, "name": "Javascript Workshop", "description": "Learning Javascript is always challenging. Challenge yourself at this workshop."},
    {"id": 3, "name": "Java 8 Workshop", "description": "Find out more about Java 8 features."},
    {"id": 3, "name": "Learn Scala", "description": "Introduction in Scala."},
    {"id": 3, "name": "AI Advanced Algorithms", "description": "Let's learn AI together at this fabulous workshop."}
]

Creating the view component

Reflux
The AllEventsConnector view component is rendered. The mixins property is used so that the component listens to the data which is sent from the store and then updates the state of the component with the new data. The connection to the store is done using Reflux.listenTo having as parameters the store and the method which is called when new data from the store is sent to the component. In the lifecycle method componentDidMount the Reflux action loadEventsDetails is called. The events information is then sent via props to the AllEvents component to be displayed.

const AllEventsConnector = createClass({

    mixins: [
        Reflux.listenTo(EventsStore, "handleStoreUpdate"),
    ],

    getInitialState() {
        return this.getCurrentState();
    },

    handleStoreUpdate() {
        this.setState(this.getCurrentState());
    },

    getCurrentState() {
        return {
            eventsInformation: EventsStore.getEventsInformation(),
        };
    },

    componentDidMount() {
        EventsActions.loadEventsDetails();
    },

    render() {
        return (
            <AllEvents eventsInformation={this.state.eventsInformation}/>
        );
    }

});

Redux
The AllEvents component is using hooks to call fetchAllEvents and dispatch the action from the container and then when the props.events is updated the component will be re-rendered and the information about the events will get displayed.

const AllEvents = (props) => {

    useEffect(() => {props.fetchAllEvents()}, [props.fetchAllEvents]);

    return props.events.map(event => <div key={event.id}> {event.name} </div>)
};

Redux Dev Tools

An advantage of using Redux is the fact that you can use the Redux DevTools plugin in Google Chrome and see the state and the actions triggered.

Cloning the projects

If you want to see the code for both projects you can clone the repositories from the links below. In order to start the projects please check the steps in the Readme files 🖥.

Sample Reflux project can be found here

Sample Redux project can be found here

After starting the project on http://localhost:3000/ you will get the events displayed.

I hope this article described how you can migrate an older project using Reflux to Redux and helps you migrate. Please let me know in the comments section below if you have other suggestions for migrating a Reflux store to Redux and which were the problems that you encountered. 🛠

Thanks 🙏

Using combined reducers in Redux

Cristina Radulescu — Fri, 24 Apr 2020 11:18:06 +0000

In this article I want to explain how to get the state from Redux using combined reducers. Our goal is to fetch events and user details from the server by dispatching actions and using sagas. We will be using mockserver to mock server calls.

For fetching the events we will create an actions file, where we will add the actions that we are going to dispatch.

export const FETCH_EVENTS = "FETCH_EVENTS";
export const FINISH_FETCHING_EVENTS = "FINISH_FETCHING_EVENTS";
export const SET_ERROR = "SET_ERROR";

const createAction = (type, data) => ({ type, data });

export const startFetchingEvents = () => createAction(FETCH_EVENTS);
export const finishFetchingEvents = (events) => createAction(FINISH_FETCHING_EVENTS, events);
export const setError = (error) => createAction(SET_ERROR, error);

After that we need to create the associated reducer which will set the state in Redux based on the action type which is dispatched:

export const initialState = {
    loadingState: null,
    events: [],
    error: null,
};

export const eventReducer = (state = initialState, action) => {

    switch (action.type) {
        case FETCH_EVENTS:
            return {...state, loadingState: "LOADING"};
        case FINISH_FETCHING_EVENTS:
            return {...state, events: action.data, loadingState: "LOADED"};
        case SET_ERROR:
            return {...state, error: action.data, loadingState: "ERROR"};
    }
    return state;
};

We are going to create an actions file for the actions that are going to be dispatched for fetching user details:

export const FETCH_USER_DETAILS = "FETCH_USER_DETAILS";
export const FINISH_FETCHING_USER_DETAILS = "FINISH_FETCHING_USER_DETAILS";
export const SET_USER_ERROR = "SET_USER_ERROR";

const createAction = (type, data) => ({ type, data });

export const startFetchingUserDetails = () => createAction(FETCH_USER_DETAILS);

export const finishFetchingUserDetails = (user) => createAction(FINISH_FETCHING_USER_DETAILS, user);

export const setUserError = (error) => createAction(SET_USER_ERROR, error);

We are going to create the associated reducer for setting the user state in Redux:

export const initialState = {
    loadingState: null,
    user: null,
    error: null,
};

export const userReducer = (state = initialState, action) => {

    switch (action.type) {
        case FETCH_USER_DETAILS:
            return {...state, loadingState: "LOADING"};
        case FINISH_FETCHING_USER_DETAILS:
            return {...state, user: action.data, loadingState: "LOADED"};
        case SET_USER_ERROR:
            return {...state, error: action.data, loadingState: "ERROR"};
    }
    return state;
};

We need to create the root reducer where we combine both reducers that were previously created. We need to pay attention to the naming we use in the combineReducers method and how we import our reducers. This basically defines the path that we are going to use for getting the state from Redux.

import {combineReducers} from "redux";
import {eventReducer as eventDetails} from "./eventReducer";
import {userReducer as userDetails} from "./userReducer";

export const rootReducer = combineReducers({
    eventDetails,
    userDetails,
});

We are going to retrieve the state from Redux in the container, where we are going to map the state to props and dispatch the actions defined to props. In order to take the state from Redux, you need to pay attention to how the reducers were mapped in the root reducers and the naming that was used there. The state and actions dispatched can be viewed in the Redux Dev Tools plugin in Google Chrome.

export const mapStateToProps = (state) => ({
    events: state.eventDetails.events,
    user: state.userDetails.user,
});

export const mapDispatchToProps = (dispatch) => ({
    fetchAllEvents: () => dispatch(startFetchingEvents()),
    fetchUserDetails: () => dispatch(startFetchingUserDetails()),
});

export default connect(mapStateToProps, mapDispatchToProps)(AllEvents);

An action that is being dispatched can trigger a saga. When the startFetchingEvents() action is dispatched the saga will be triggered based on the type of the action, in this case FETCH_EVENTS ;

export function* fetchAllEventsEffect() {
    try {
        const response = yield call(fetchEvents);
        yield put(finishFetchingEvents(response.data));
    } catch (e) {
        console.error("Could not load events", e);
        yield put(setError(e));
    }
}

export default function* fetchAllEvents() {
    yield takeLatest(FETCH_EVENTS, fetchAllEventsEffect);

}

export function fetchEvents() {
    return axios.get('http://localhost:8080/allevents');
}

The source code for this project can be found here.

After reading this article I hope you will have a better understanding of how combined reducers work.

Please let me know in the comments section below what you think. Thanks.😁

Context API vs. Redux in a React Application

Cristina Radulescu — Fri, 24 Apr 2020 11:17:55 +0000

In this article I want to make a comparison between state in Redux and state in the Context API.

Redux

The state is maintained in a store which is connected to reducers, actions and middleware. In this example I will use saga middleware for fetching the information from the server and dispatching redux actions. The store information is then sent to the components using a Provider.

Store

export const sagaMiddleware = createSagaMiddleware();
const store = createStore(eventReducer);
sagaMiddleware.run(rootSaga);

export const EventsConnector = (props) => (
    <Provider store={store}>
        <AllEvents {...props}/>
    </Provider>
);

Reducer

export const initialState = {
    state: null,
    events: [],
};

export const eventReducer = (state = initialState, action) => {

    switch (action.type) {
        case FETCH_EVENTS:
            return {...state, state: "LOADING"};
        case FINISH_FETCHING_EVENTS:
            return {...state, events: action.data, state: "LOADED"};
            }
    return state;
};

Actions

The actions startFetchingEvents and finishFetchingEvents will be dispatched to update the state in Redux.

export const FETCH_EVENTS = "FETCH_EVENTS";
export const FINISH_FETCHING_EVENTS = "FINISH_FETCHING_EVENTS";

const createAction = (type, data) => ({ type, data });

export const startFetchingEvents = () => createAction(FETCH_EVENTS);

export const finishFetchingEvents = (events) => createAction(FINISH_FETCHING_EVENTS, events);

Setting the state

For setting the state an action startFetchingEvents is dispatched which triggers the the saga which after fetching the events from the server will dispatch finishFetchingEvents which will set the events in the Redux state.

export function* fetchAllEventsEffect(action): * {
    try {
        const response = yield call(fetchEvents);
        yield put(finishFetchingEvents(response.data));
    } catch (e) {
        console.error("Could not load events", e);
        yield put(setError(e));
    }
}

export default function* fetchAllEvents(): * {
    yield takeLatest(FETCH_EVENTS, fetchAllEventsEffect);
}

export function fetchEvents() {
    return axios.get('http://localhost:8080/allevents');
}

Context

The state is maintained in the Context and being handed over to the component using a Provider. When the getEvents method is called, the state on the Context will be updated with the response from the server.

State

const EventContext = createContext();

const EventState = props => {
    const initialState = {
        events: [],
        loading: false
    };

    const [state, dispatch] = useReducer(EventReducer, initialState);

    const getEvents = async (name) => {
        setLoading();
        const result = await axios.get('http://localhost:8080/allevents');
        const events = result.data;
        dispatch({
            type: GET_EVENTS,
            payload: name ? events.filter(item => (item.name.toLowerCase()).includes(name)) : events
        })
    };

    const setLoading = () => dispatch({type: SET_LOADING});

    return (
        <EventContext.Provider
            value={{
                events: state.events,
                loading: state.loading,
                getEvents,
            }}>
            {props.children}
        </EventContext.Provider>
    )
};

Reducer

export const GET_EVENTS = 'GET_EVENTS';
export const SET_LOADING = 'SET_LOADING';

export default (state, action) => {
    switch (action.type) {
        case GET_EVENTS:
            return {
                ...state,
                events: action.payload,
                loading: false
            };
        case SET_LOADING:
            return {
                ...state,
                loading: true
            };
        default:
            return state
    }
}

Getting the state from Redux using containers

export const mapStateToProps = (state) => ({
    events: state.eventDetails.events,
});

Getting the state from Context using hooks

  const {events, loading, getEvents} = useContext(EventContext);
  useEffect(() => { getEvents();}, []);

My opinion is that for new projects where you need to maintain the state, Context API is a better choice as it makes things a bit simpler than Redux. However, in projects where you are already using Redux, a migration to Context might not really be needed, as in the end both do implementation do the same thing, maintaining state.

You can clone the sample project from here.
In order to start the project you can follow the steps in the Readme. For the calls to server we will be using the mockserver.

Let me know in the comments section below if you already use the Context API and if you find it better than Redux and why.