Snips & Tips
Snips & Tips
  • Snips & Tips
  • 📊Data Science
    • Polars Dataframe Library
    • Loading large data
    • Pandas
      • Pandas Apply Function
    • Apache Spark
      • Custom Transformer
    • Data Visualizations
    • Jupyter Notebooks
      • Jupyter Notebook Structure
    • Probability
    • Statistics
      • Statistical Tests
      • Z - Test
      • Hypothesis Testing
    • SQL
      • SQL Tips
      • Creating new columns
  • ☘️Deep Learning
    • Backpropagation in Deep Learning
    • Pytorch Early Stopping
    • Optimizers
  • Pytorch Tensor Shapes
  • 🔖Machine Learning
    • Handling Imbalanced Dataset
    • Time Series Forecasting
      • Hierarchical Time Series Forecasting
      • Facebook Prophet
      • Misc
    • Handling high dimensionality data
      • Weight of evidence and Information value
    • Debugging ML Models
    • Feature Engineering
      • Time Series
      • Outlier Detection
      • Categorical Encoding
      • Feature Scaling
  • 🐲DSA
    • Arrays
  • 🖥️WEB DEV
    • Typescript
    • React State Management
    • Redux Boilerplate
    • Intercept a HTTP request or response
    • this keyword
    • Array Methods
    • Throttle Debounce
    • Media Queries
    • React Typeahead Search
  • Replace text with React Component
  • 💻Product Analytics
    • Product Sense
    • Customer Segmentation
  • 🖥️Terminal
    • Terminal Commands
    • Jupyter Notebook 2 HTML
  • 🪛Tools and Libraries
    • Web Based
    • Databases
  • 🚟Backend
    • Fast API CRUD
    • Scalable APIs
  • 💸Quant Finance
    • Misc
    • Factor Investing
  • 🎮Game Dev
    • Misc
  • 🛠️Architecture
    • Docker
    • AWS CDK
  • 🦠Artificial Intelligence
    • AI Engg
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. WEB DEV

Redux Boilerplate

Store.js

//store.js
import { configureStore } from "@reduxjs/toolkit";
import underlyingReducer from "../features/underlyings/underlyingSlice";
// import { createLogger } from 'redux-logger';

// const logger = createLogger({
//   collapsed: true,
//   predicate: (getState, action) => action.type !== 'socket/priceDataAdded'
// });

export const store = configureStore({
  reducer: {
    underlying: underlyingReducer,
  },
  // middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
});

Slice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

const apiUrlBase = "www.google.com";

export const fetchListings = createAsyncThunk(
  "fetchDerivativeListings",
  async (token) => {
    let finalData = {
      payload: [],
    };
    const response = await fetch(`${apiUrlBase}/derivatives/${token}`);
    let stockData = await response.json();
    return finalData;
  },
);

const initialState = {
  isLoading: false,
  data: {
    stockData: [],
  },
  isError: false,
};

const derivativesSlice = createSlice({
  name: "derivatives",
  initialState,
  reducers: {
    priceDataAdded: (state, action) => {
      state.priceData[action.payload.token] = action.payload.price;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchListings.pending, (state) => {
      state.isLoading = true;
      state.data.stockData = [];
    });
    builder.addCase(fetchListings.fulfilled, (state, action) => {
      state.isLoading = false;
      let { payload } = action;
      if (payload.success) {
        state.data.stockData = payload.payload;
        state.isError = false;
        state.data.message = "";
      } else {
        state.data.stockData = [];
        state.data.message = payload.err_msg;
        state.isError = true;
      }
    });
    builder.addCase(fetchListings.rejected, (state, action) => {
      console.log("Error ", action.payload);
    });
  },
});

export const { priceDataAdded } = derivativesSlice.actions;
export default derivativesSlice.reducer;

component.js

import { useDispatch, useSelector } from "react-redux";

const state = useSelector((state) => state.underlying);
const socketData = useSelector((state) => state.socketData.priceData);
PreviousReact State ManagementNextIntercept a HTTP request or response

Last updated 1 year ago

Was this helpful?

🖥️