Redux vs Redux Toolkit

redux toolkit

createReducer over traditional Reducer approach comparision

Passing a function as a prop to a functional component

In actuality, Redux in its bare form is quite simple and easy to understand. But one of the most popular and enduring critiques is the amount of code Redux adds to the app, which many feel is unnecessary. To overcome this the Redux team has put a huge amount of effort into this and without a doubt has produced a remarkable result with Redux Toolkit.

But Recently Redux Team launched Redux Toolkit, an officially recommended and a SOPE library that stands for Simple, Opinionated, Powerful, and Effective state management library. It allows us to write more efficient code, speed up the development process, and automatically apply the best-recommended practices. It was mainly created to solve the THREE MAJOR ISSUES with Redux:

  • Configuring a Redux store is too complicated
  • Have to add a lot of packages to build a large scale application
  • Redux requires too much boilerplate code which makes it cumbersome to write efficient and clean code.

Redux Toolkit comes prebundled with below features:

  • immer.js => a library/tool to handle immutability in stores.
  • redux => For state management
  • redux-thunk =>For async tasks
  • reselect => For selecting a slice out of global store
  • automatic support for Redux Dev-tools Extension

Install:

# Yarn
yarn add @reduxjs/toolkit

What Extra Features Are Provided:

  • configureStore() function which provides automatic support for Redux-thunk, Redux DevTools Extension, and also passes the default middleware.
  • createReducer() utility which provides support for immer library that allows writing the immutable code mutably.
  • createAction() utility that returns an action creator function.
  • createSlice() function that comes in handy to replace create action and create Reducer functions with a single function.
  • createAsyncThunk() that takes Redux strings as arguments and returns a Promise.
  • createEntityAdapter() utility that helps to perform CRUD operations.

RTK follows the ducks pattern and combines reducers, actions, and constants in one file called a slice. Each slice will provide an initial state and a reducer function for an object in store. So our component that provides the data, which is a duck now, will look like this.

As you can see, cons
Smarter Redux with Redux Toolkit

May 28, 2020 8 min read

When Redux first appeared on the frontend horizon, many expected it to be a solution to all our state management problems. Its association with React was so deep that people began to believe that React was somehow incomplete without Redux, though this idea was categorically rejected by Redux creator Dan Abramov.

Gradually, developers began to realize Redux’s limitations, which led to a chain of debate around whether there are better ways to manage global state — and, indeed, whether Redux is a viable solution to begin with.

Many of the arguments against Redux were born of a number of opinions and “best practices” that later came to be viewed as requirements. (In actuality, Redux in its bare form is quite simple and easy to understand.) But one of the most popular and enduring critiques is the amount of code Redux adds to the app, which many feel is unnecessary.

Those debates led to the development of Redux Toolkit (RTK), “the official, opinionated, batteries-included toolset for efficient Redux development.” The Redux team has put a huge amount of effort into this and without a doubt has produced a remarkable result.

RTK resolves many of the arguments related to boilerplate and unnecessary code. As mentioned in its official docs, it helps to solve three major problems people had with Redux:

  1. “Configuring a Redux store is too complicated.”
  2. “I have to add a lot of packages to get Redux to do anything useful.”
  3. “Redux requires too much boilerplate code.”

Here we will see how we can leverage RTK’s API to make our Redux applications smaller yet still powerful. We will use the container-presentation pattern and Redux setup used with react-boilerplate as a baseline for our transformation. I have been using react-boilerplate for a long time now, and it has helped me bootstrap large-scale applications quickly. It has the following architecture for containers:

  • Redux: For state management
  • Reselect: For selecting a slice out of global store
  • Immer: For handling immutability in stores
  • Redux-Saga: For async tasks

One important note: Redux-Thunk is available with RTK as a default option for async tasks and is highly recommended for simple data fetching tasks.

RTK follows the ducks pattern and combines reducers, actions, and constants in one file called a slice. Each slice will provide an initial state and a reducer function for an object in store. So our component that provides the data, which is a duck now, will look like this.

As you can see, constants, actions, and reducer files are now gone, and there is a new slice.js file that uses the createSlice method from RTK. This method returns an object with reducers and actions that can be used for injection and/or with other middlewares.

createSlice

As discussed above, our tuple of actions/reducers/constants can be replaced by Redux Toolkit’s createSlice API. It is a helper method to generate a store slice. It takes the name of slice, initial state and reducer function to return reducer, action types and action creators.

In return, it gives us the name of the slice, action creators, and reducer functions. All of these can be used for injection of the slice, dispatching actions, and other cases, depending upon implementation. Here is how our slice.js looks:

As we can see, createSlice returns an object with a name, reducer, and actions, and these are used in a number of ways. In our example, exports from our slice object are used as follows:

Passing a function as a prop to a functional component

The first parameter logThis will be props object itself. You need to destructure the logThis object.

Or you can access it from props

React — How to force a function component to render?

I have a function component, and I want to force it to re-render.

How can I do so?
Since there’s no instance this, I cannot call this.forceUpdate().

🎉 You can now, using React hooks

Using react hooks, you can now call useState() in your function component.

useState() will return an array of 2 things:

  1. A value, representing the current state.
  2. Its setter. Use it to update the value.

Updating the value by its setter will force your function component to re-render,
just like forceUpdate does:

Materialize vs Material UI

Both materialize and material UI implement Google’s Material Design. Material Design is a design language developed in 2014 by Google and is very popular for web and mobile applications.

Materialize: A modern responsive CSS Framework based on material design;

Material-UI:

Material UI is a great component library that emulates Google’s Material Design.

It’s very easy to make use of Material Design elements in your React web or mobile application. The library’s website can be found at: https://material-ui.com.

It’s important to also note that the Material-UI framework is built with Roboto as the designated default font and will require you to also include a link in your html file, in order for the text type components (such as Typography) to work properly.

Theming in Material UI

Material UI relies on React Context to provide a theming object throughout your component hierarchy. This context is provided by the ThemeProvider component of Material UI’s styles:

Material UI

Box is a more powerful, convenient, and potential replacement for div. Box can be made to use as div, span or any kind of wrapper as shown below:

Note: using clone, <h1> inherits the styles of <Box>.

Grid is the syntactic sugar of Gird Layout.

Container The container centers your content horizontally.It manages the layout of its children.

  • xl: 1920px(extra large)
  • lg: 1280px(large)
  • md: 960px(medium)
  • sm: 600px(small)
  • xs: 0px(extra small)

Syntax:

Styling in Material UI

Inbuilt Styling in Material UI

How to use styled components with Material UI in a React app

Styled-components is another great library used to style React components. We do so by defining React “styled” components without CSS classes.

Styling using Styled-Component in Material UI

Must Read @ https://uxdesign.cc/material-design-with-reactjs-using-material-ui-9f7e81a955f7

createReducer over traditional Reducer approach comparision

createAction over traditional actionCreator

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.