Redux-toolkit

Q.1 What is Redux?

Ans:- Redux is a State Management Library. that can contain all the states of an application. Redux allows to React Component to read data from the redux store.

Q2. What is the Difference between Redux and redux-toolkit?

Ans:- Redux is the state management library and redux-toolkit is a set of tools that help simplify redux development.

Q. What is the use of CreateSlice in the redux toolkit?

Ans :- A function that accepts an initial state and an object of reducer functions, and a "slice name". and automatically generates action creators and action types for the reducer and state. this slice is a good approach for writing redux-logic.

in simple words, CreateSlice generates action creators and action types. a slice is the good approach for writing redux-logic.

Q3. What are the core principles of Redux?

Ans:- Three principles of redux -

• Single source of truth:- The state of your whole application is stored in an object tree within a single store .

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

• The State Is Read-Only:- we can only read the states and if you want to update the state of your application, you need to redux with an action. and not allowed to update the state object directly.

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

• Changes are made with pure functions:- to specify how the actions perform to the state tree, you need to write reducers(pure functions). reducers function takes the previous state and actions as a parameter and returns the new state.

Reducer - (prev state , action )=> new state

Q4. What is Redux Architecture and explain the components?

Ans:-

• Store:- A store is the space where all states of application are stored.

• Actions:- Action sends or Dispatch the data from the view, which are payloads that can be read by reducers.

• Reducers:- It Determines How The State Will Change. Reducers get data from Actions and filtered data and sent it to the store.

Q5. What are the advantages of redux?

Ans:-

• Redux provides the data to components.
• Redux manages the data globally.
• Redux has one store and in the store, all the states of the application are stored.
• Redux works with large-scale communities.

Q6. what are the differences between Redux and Context API?

Ans :-

• useContext is a hook. whereas Redux is a state management library.

• useContext is used to share data. whereas Redux is used to manage data or state.

• useContext is better to use small applications. whereas Redux is perfect for large applications.

• in useContext UI Logic and state management logic are in the same component. whereas in Redux UI Logic and state management logic are in a separate component.

Advance Topic of Redux:-

Q1. What is Redux-thunk and Redux saga?

Ans :-

• Redux-thunk:- Redux-thunk is a middleware library. and thunk always returns the function instead of an object. that can handle the async task.

• Redux -saga:- Redux -saga is a middleware library used to allow the Redux store to asynchronously interact with outside resources(Side-effect).

Redux-Saga helps in:

• making HTTP requests
• accessing browser storage
• executing I/O operations

A Redux-saga is written as a function and implemented as a generator function that can yield an object to saga middleware.

You need to use the Redux-Saga middleware to connect to the Redux store

• First step

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

import reducer from './reducers';
import helloSaga from './sagas';

// 1. Create the saga middleware
const sagaMiddleware = createSagaMiddleware();
// 2. Pass it as a middleware while creating the store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
);

// Then run the saga
sagaMiddleware.run(helloSaga);

• Second step :-

// sagas.js

// A `hello world` example:
export function* helloSaga() {
  console.log("Hello Sagas!");
}

// Async example:
// the asyncSaga Saga sleeps for 1 second via the call to timeout(1000),
 // then dispatches an INCREMENT action(via `put` effect).

export function* asyncSaga() {
  yield timeout(1000);  // setTimeout is used to implement timeout
  yield put({ type: 'INCREMENT' });
}

Q2. What are Redux dev tools and explain the features of redux dev tools?

Ans:- Redux dev tools are a chrome-based extension that provides a console where we can set up a development environment with redux.

with the help of these dev tools, we can visualize the actions and state changes that generally use in redux-based applications.

Q3. What is Rematch.JS?

Ans:- Rematch.JS is an improve version of Redux with extra capabilities and less boilerplate. It makes state management easy with a better developer experience.

Difference between Redux vs Rematch.JS:-

• Rematch has a simple setup, Whereas Redux can set up the environment.
• Rematch has less boilerplate, whereas Redux has more boilerplate.
• Rematch has readability, whereas Redux has less readability.
• Rematch and Redux both are configurable.
• Rematch and Redux both have dev tools.
• Rematch work with async/await, whereas Redux works with thunks.

How to Migrate Rematch from Redux?

Ans:- Migrating from Redux to Rematch may only involve some minor changes to your state management and no necessary changes to your view logic.

1. Setup Rematch init with Redux.

import React from "react";
import ReactDOM from "react-dom";
import { init } from "@rematch/core";
import { Provider } from "react-redux";
import thunk from "redux-thunk";

import sharks from "./redux/sharks";
import App from "./App";

// generate Redux store
const store = init({
  redux: {
    reducers: {
      sharks,
    },
    middlewares: [thunk],
  },
});

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

ReactDOM.render(<Root />, document.querySelector("#root"));

1. Mix reducer & modules.

const INCREMENT = "sharks/increment";

export const incrementSharks = (payload: number) => ({
  type: INCREMENT,
  payload,
});

export default (state = 0, action: { payload: number; type: string }) => {
  switch (action.type) {
    case INCREMENT:
      return state + action.payload;
    default:
      return state;
  }
};

Now, add it to your init() method and remove redux-thunk because isn't required with Rematch

import { init } from "@rematch/core";

const store = init({
  models: {
    sharks,
  },
});