Breaking News: Grepper is joining You.com. Read the official announcement!

Implement REDUX to REACT using reduxjs/toolkit

Add Answer

Mappy Show answered on June 15, 2022 Popularity 10/10 Helpfulness 5/10

answer Implement REDUX to REACT using reduxjs/toolkit

related redux js toolkit

related reduxjs toolkit createaction

related how to setup create api redux-toolkit

Implement REDUX to REACT using reduxjs/toolkit

Comment

// After new release of redux, we don't need to install/use too many packages,
// we just need below.

// necessary packages
> npm install @reduxjs/toolkit react-redux

// store.js:
import { configureStore } from '@reduxjs/toolkit';
import productsReducer from './StateSlice/productsSlice';

const store = configureStore({
  reducer: { products: productsReducer },
});

export default store;

// productsSlice.js:
import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

const productsSlice = createSlice({
  name: 'products',
  initialState: {
    productLists: [],
    loading: true,
  },
  reducers: {
    PRODUCT_LIST_REQUEST: (products) => {
      products.loading = true;
    },
    PRODUCT_LIST_SUCCESS: (products, action) => {
      products.loading = false;
      products.productLists = action.payload;
    },
    PRODUCT_LIST_FAIL: (products, action) => {
      products.error = action.payload;
      products.loading = false;
    },
  },
});

// Action creators are generated for each case reducer function
export const { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL } =
  productsSlice.actions;

export default productsSlice.reducer;

// Action Creators
export const listProducts = () => async (dispatch) => {
  try {
    dispatch({
      type: PRODUCT_LIST_REQUEST.type,
    });

    const { data } = await axios.get('/api/products');

    dispatch({ type: PRODUCT_LIST_SUCCESS.type, payload: data });
  } catch (error) {
    dispatch({ type: PRODUCT_LIST_FAIL.type, payload: error.message });
  }
};

// Apply to react, HomeScreen.jsx:
import React, { useEffect } from 'react';

import { LoadingBox, MessageBox, Product } from '../components';

import { useDispatch, useSelector } from 'react-redux';
import { listProducts } from './../store/StateSlice/productsSlice';

const HomeScreen = () => {
  const dispatch = useDispatch();
  // productsSlice -> name is "products"
  // productsSlice -> initial "productLists, loading"
  const products = useSelector((state) => state.products);
  const { loading, error, productLists } = products;

  useEffect(() => {
    dispatch(listProducts());
  }, [dispatch]);

  return (
    <div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
      {loading ? (
        <LoadingBox />
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <>
          <h2 className="sr-only">Products</h2>
          <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:grid-cols-3 lg:gap-x-8">
            {productLists.map((product) => (
              <Product key={product.id} product={product} />
            ))}
          </div>
        </>
      )}
    </div>
  );
};

export default HomeScreen;

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript redux using

Link to this answer
Share Copy Link

Contributed on Oct 14 2022

Mappy Show

0 Answers Avg Quality 2/10

Closely Related Answers

redux js toolkit

Comment

// Redux + Plain JS template
npx create-react-app my-app --template redux

// Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

Popularity 10/10 Helpfulness 2/10 Language actionscript

Source: Grepper

Tags: actionscript actionscri

Link to this answer
Share Copy Link

Contributed on Sep 07 2022

Roookas

0 Answers Avg Quality 2/10

reduxjs toolkit createaction

Comment

createAction('tagsLoadSuccess', (tags: string[]) => {
  return {
    payload: tags,
  };
})

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: www.tabnine.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 15 2022

mernme

0 Answers Avg Quality 2/10

how to setup create api redux-toolkit

Comment

// Import the RTK Query methods from the React-specific entry point
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// Use the `Post` type we've already defined in `postsSlice`,
// and then re-export it for ease of use
import type { Post } from '@/features/posts/postsSlice'
export type { Post }

// Define our single API slice object
export const apiSlice = createApi({
  // The cache reducer expects to be added at `state.api` (already default - this is optional)
  reducerPath: 'api',
  // All of our requests will have URLs starting with '/fakeApi'
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
  // The "endpoints" represent operations and requests for this server
  endpoints: builder => ({
    // The `getPosts` endpoint is a "query" operation that returns data.
    // The return value is a `Post[]` array, and it takes no arguments.
    getPosts: builder.query<Post[], void>({
      // The URL for the request is '/fakeApi/posts'
      query: () => '/posts'
    })
  })
})

// Export the auto-generated hook for the `getPosts` query endpoint
export const { useGetPostsQuery } = apiSlice

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: api javascript javascrip

Link to this answer
Share Copy Link

Contributed on Aug 30 2024

Omor Faruk

0 Answers Avg Quality 2/10

Implement REDUX to REACT using reduxjs/toolkit

Contents

More Related Answers

Implement REDUX to REACT using reduxjs/toolkit

Closely Related Answers

redux js toolkit

reduxjs toolkit createaction

how to setup create api redux-toolkit

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.