Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A dynamic programming language used in all sorts of web and mobile applications.
A cross-platform programming language designed to run robust applications on any device.
A UI toolkit used to build natively compiled applications from a single codebase.
A functional programming language that’s ideal for scalability, maintainability, and reliability.
A Customer Relationship Management (CRM) platform that seamlessly integrates with your business operations.
A high-performance programming language that makes it easy to build simple, reliable, and efficient software.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
Redux has become a valuable asset for managing a global React state. Passing props and bubbling them up can become a real headache, especially if you have a lot of components down the stack and forget even a single one in an event handler.
The problem only gets worse once you consider sharing state values with sibling components; you might need to include unused parent variables so it can mediate between its two child components needing the same one.
However, setting up Redux can be a chore. Some developers might even find it counterintuitive while others might find the writing of actions and reducers an additional and unwelcome job. Redux Toolkit (RTK), previously known as Redux Starter Kit, provides some options to configure the global store and create both actions and reducers in a more streamlined manner.
You will need to include Redux as well as the react-redux binding package for it to work properly with React. You’ll also need the Redux Toolkit itself. The three packages can be added using a nodeJS bundle utility such as npm or yarn, like so:
Usually, you would also need the Redux DevTools extensions in order to debug your store mutations correctly; but since you’re using RTK, those are already included.
In traditional Redux, you had to call createStore using the main reducer as a parameter. The way to do it with RTK is to call configureStore, which allows you to do the same, but also instantiates RTK to work with other functionalities.
Let’s say we have a basic main reducer function like the one here:
Remember you might also have a reducer combiner function here, but let’s just create a simple one. Now. to create a store with RTK, you must use:
This creates a store with the mainReducer function at its core using DevTools as well as the default middleware (including thunk and a couple of logging tools). This is all done with configureStore.
Creating actions with RTK is much simpler than with the traditional arrow function which calls a dispatch. To create an action you just have to do something like this:
-- CODE language-jsx keep-markup --
const someAction = createAction('SOME_ACTION');
And that’s it. The action can be imported elsewhere (like in any of your components) and be called with any payload you choose. Behind the scenes, this will make the usual dispatch call to the reducer, specifying type and using the single parameter when called as a payload. So:
-- CODE language-jsx keep-markup --
someAction('Hello');
would call the action with the string “Hello” as the payload.
If needed, you might also include some additional logic. Say, for example, you need to invoke an axios call and then send the response as part of the payload. You would then call the createAction helper like this:
Note that in the return we don’t include either the dispatch call nor the type.
As for the reducers we also have a helper which can streamline the process. The initial reducer we used as an example could be re-written like this:
The real differentiator in RTK is the possibility of creating actions and reducers all at once with the use of the new element: slices. In order to create both you would do something like this:
Now, there are several things to notice here. First, we’re importing axios to make a REST get call (although you could use fetch, or any other method you’d prefer). We’re assuming that we have a proxy configured in our packages.json file and an API that receives a type param which will fetch data used in someProperty.
The initial values for the state are configured in a similar manner to the one we had previously used, but starting on the next line things get interesting.
We just used the createAsyncThunk helper for relating our store dispatch to the async logic needed to fetch data from the API. We specified the name of the action as the name we’ll be giving our slice (see next paragraph), followed by a / and the name of the action (in this case, someAction). Then we passed the actual function to the helper, but note there is no mention of the dispatch helper anywhere; it’s just a normal fetching action with a promise returned.
Next comes the slice, which as we stated previously, is a nice and elegant way of defining both actions and reducers at the same time. The slice receives a name (which must be the same name as any names used in async thunks related to this store), an initialState, and then the normal reducers (those that can simply alter the store without the need of any asynchronous operations). These reducers just receive the name of the action which will in turn get the state and action as params and each action will do the needed store reduction.
After the normal reducers come the (optional) extraReducers, which are those that need some extra logic and are related to the store through possible async results. You’ll notice we used the fulfilled suffix after our actual action name. That’s because the actions created by createAsyncThunk can have three possible results: pending, fulfilled and rejected. You might specify some actions in the store while the results are pending, set some results with fulfilled (as we just did), or manage errors in the async function with the rejected suffix.
Finally, we configured our store in a similar way we previously used but the reducers are now provided by our slice.
In order to connect the store we defined in your React app, you’ll need to wrap all the content within a <provider></provider> tag. First, import the Provider component.
Using the connect function you can map props in the global state to your local props as well as dispatch actions so you can use them within your component:
-- CODE language-jsx keep-markup --
import React from 'react';
import { Provider, connect } from 'react-redux';
import { store, testSlice, someAction } from './store';
const { actions } = testSlice;
const { otherAction, finalAction } = actions;
const App = ({
someProperty,
otherProperty,
/* ... */
finalProperty,
someAction,
otherAction,
/* ... */,
finalAction,
}) => (
<Provider store={store}>
<button
onClick={() =>
someAction(1)
}
type="button"
>
Test
</button>
</Provider>
);
const mapStateToProps = state => ({
someProperty: state.someProperty,
otherProperty: state.otherProperty,
/* ... */,
finalProperty: state.finalProperty,
});
export default connect(
mapStateToProps,
{ someAction, otherAction, /* ... */, finalAction },
)(App);
The connect helper allows us to map the global state to our props (by using a simple mapStateToProps function) and the actions we want to dispatch. In this manner, we can access all the props from within our component code and dispatch actions to the reducer by simply calling the mapped action.
By using the Redux Toolkit you can write all the code you’ll need for your Redux store in a single file, including actions and reducers, in a much more readable way.
We’d love to learn more about your project.
Engagements start at $75,000.