Getting started with Redux in SharePoint Framework – Part 1

Finally I managed to write this blog post. It took me a couple of attempts, but after my session at SPS Doha I was encouraged enough to finish the blog post and provide it to you.

This post will take you step by step into the wonderful world of Redux, React and SharePoint Framework (SPFx). It’s built up by my own experiences of a pretty large SPFx project where Redux was used to handle the states of numerous (+50) components.

Why using ‘something’ like Redux?

The states within my first SPFx projects were pretty much easy to handle and we had a good overview of how they handled changes in the components. But the latest project I did with SPFx was really different than the previous ones. This time there were just too many components to handle and too much data to pass trough between the components. This means that it would cost us a lot of time to think about how to pass properties between components and how to traverse between the different levels of components.

And that’s when Redux came in the picture. Without Redux, as an ‘external’ state management mechanism, handling those state changes would be close to impossible.

Let’s take this simple example (which will be used throughout this post) where we have an SPFx webpart that displays the sessions of SPS Doha. Besides showing the list, it also allows the user to add and remove sessions to and from the list. Pretty simple example, but it does help to explain the dependencies between the components.

Overview of the simple application

In the Webpart component we will store a list containing all the sessions. Those sessions are fetched from a specific API (async) when the webpart is loading.

The list of sessions is passed through to the ‘Session list’-component where every item is displayed with the ‘Session item’-component. That component also contains a remove icon to remove that item from the list (which is stored in the webpart component).

On the other hand we have the input form, that component simply contains two input fields (title and speaker), and a submit button. The button is the trigger to add a new item in the list (again, that list is stored in the webpart component).

As you probably know, this means that we need to pass functions between the components containing a callback to update the list in the webpart component.
For example:

Coding of (React) example

So how do we get the example of the session list working with just ‘plain’ React code in SPFx?

Webpart/Container component

In our main component we create multiple things:

  • Function to retrieve the data from the API
  • Function to add an item to the list
  • Function to remove an item from the list
  • Rendering of the subcomponents

The most important part of this component is the rendering function. Here we see the callback functions being passed on to the child components. We also see that SessionList retrieves the local state variable sessionItems. This variable/list will be updated by the callback functions _AddItem and _DeleteItem

The other code can be found here:

Form component

Next we have the form component where we can add new items to the list. When a user clicks the button, the _handleAddButtonClick function will call the callback function handleAddItem from the properties of the component. This way the data will be propagated up towards the main component.

SessionList component

Not really magic stuff in this component, just simply a .map iteration over the sessionItems and loading the SessionItem component. The only thing to notice is the propagation of the callback function.

SessionItem component

In this component we have the option to delete the specific item from the list of sessions. This is made possible by using the callback function which is provided in the props of the SessionItem component (onDeleteItem). Calling this will trigger the main component and remove the item from the state.

Overview/conclusion React example

So as you can see in the picture below, we have to propagate a lot of data and callback functions up and down to let the application respond to the user input. In this small example it is still easy to manage and sustain the global state of the application. But when you have many more levels of components and a more complex data structure, it can easily become unsustainable to manage the global state.

And that’s where Redux comes in the picture; to provide an alternative way of managing the global state. It will create a new global state ‘beside’ your application and a component can connect to it when it’s necessary to retrieve or update data. If a component has nothing to do with data, it remains independent and unaware of the global state.

Converting to Redux

In the following post I will explain step by step how to convert this example to Redux. It will basically contain the following parts:

  • Installing and creating the basic Redux parts
    • Store
    • Reducer
    • Actions
    • ApplicationState
  • Decouple components from each other
  • Connecting components to the store
  • Middleware

Getting started with Redux in SharePoint Framework – Part 2

One thought on “Getting started with Redux in SharePoint Framework – Part 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.