Tutorial — setting up project with React, React Router, Redux and Redux-Saga

I use React, Redux (a predictable state container) and Redux-Saga (side effects handling) regularly and can truly recommend these tools.

We already know how to setup a sample project with Webpack so let’s use this knowledge to handle some basic configuration of React, Redux and Redux-Saga. Feel free to use the scaffold from the provided link. Please note that this is supposed to be just a project setup tutorial. I provide some description of how things work but I don’t get too deep down into details.

First step is to install the necessary dependencies:

npm i --save react react-dom react-redux react-router redux redux-saga prop-types

Now, let’s create a component that will be connected to the Redux store (i.e. the state of the application):

Don’t worry for now about the imports, we will handle it later. We have two special functions here: mapStateToProps and mapDispatchToProps. First one will allow to use content from the state object as props and the second one will allow to dispatch some actions that will modify the store. There’s also a special function connect that will connect our component to the Redux store and as parameters it takes two previous functions. In case we don’t need any of them, we can provide null as a parameter.

We can now setup a store and React Router:

The createStore function takes a special function called reducer (we declare and handle state of the application there) as a first parameter and a ‘trick’ that will allow us to use Redux in Dev Tools as a second parameter. The Provider component binds Redux to React. For React Router, we provide a path in the project where our component will be rendered. If you want to know exactly how the React Router works check out here.

The rootReducer file looks like this:

We import a special function combineReducers that combines different reducers (parts of the state) into one. Currently it consists of one such item (sampleReducer):

First, we’re importing the SAMPLE_CALLED action. An action is just a function that returns an object with a specific shape (most often: a type and a value). Then, we set an initial state of the app. Later, state can be changed based on the dispatched actions.

Our action file:

When this action will be dispatched, it will be handled in the reducer (case SAMPLE_CALLED).

In order to setup Redux-Saga we need to slightly modify our configuration file where we configured React Router and the store:

So in this step we’re basically connect Redux-Saga to the store and later run a sample saga that looks like this:

If you want to find out more about sagas check out here. Basically what’s happening here is that we import a selector (i.e. getting a portion of the state) and checking its’ current value, then we are waiting for the SAMPLE_CALLED action dispatch and finally check the selector’s value once again in order to find out if the value changed after the dispatch. Selector file:

Remember how we declared the initial state of the app?:

const initialState = {
 reveal: false,
 sampleValue: 'alive thanks to Redux stuff!'
};

Provided selectors just take those values :)

Why not just write

state.sampleValue

Recall the rootReducer and it should be more clear:

const rootReducer = combineReducers({
 sample: sampleReducer
});

So we have the main object state and our sampleReducer is a nested object.

All is prepared for the app to run. Here is the main functionality of this scaffold:

So we want to dispatch an action that is bind to the sampleCheck prop and pass true as a value. It will change the reveal prop set in the state from false to true so the sampleValue text set in the state(“alive thanks to Redux stuff!”) will be visible. All will be handled with the help of Redux and Redux-Saga.

You now have a working initial setup for the top Front-end tools that are currently around for some time. You can download all the prepared files from here. Setting it all up on your side shouldn’t be hard but if you encounter any problems or need anything from me — just let me know and I will help.

Cheers!