Redux vs Redux Toolkit

📄 Table of Contents

Introduction

# NPM
npm install @reduxjs/toolkit
# Yarn
yarn add @reduxjs/toolkit

createSlice

import { createSlice } from '@reduxjs/toolkit';

// The initial state of the HackerNews component
export const initialState = {
data: [],
loading: false,
error: false,
};

const hackerNewsArticlesSlice = createSlice({
name: 'hackerNewsArticles',
initialState,
reducers: {
fetch(state) {
state.loading = true;
state.error = false;
state.data = [];
},
fetchSuccess(state, action) {
state.data = action.payload.data;
state.loading = false;
},
fetchFailure(state, action) {
state.error = action.payload.error;
state.loading = false;
},
},
});

export const { name, actions, reducer } = hackerNewsArticlesSlice;
Code of a Slice in redux toolkit

◉ Materialize vs Material UI

◉ Theming in Material UI

import { ThemeProvider } from '@material-ui/core/styles';
export const App = () =>
<ThemeProvider theme={theme}>
...
</ThemeProvider>

Material UI

<Box style={{“fontSize”: “22px”, “color”:”red”}} clone>
<h1>This is with fixed property</h1>
</Box>
<Container maxwidth="lg">  or <Container fixed>
<h1>This is Container</h1>
</Container>

Styling in Material UI

Inbuilt Styling in Material UI

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

Styling using Styled-Component in Material UI

◉ 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.