How do I change SPFx and Reactjs to SPFx React-Redux?

Question

I am currently developing an App with SharePoint Framework (SPFx) and I need to use Redux.

It is about controlling the inventory of products, there are notifications when there is little product and there are product purchase approvals.

My application has more or less the following appearance:

Main View By clicking on the priority of the notifications, it would change the category menu and product cards, showing itself in the following way:

Priority View The functionality you have is:

1.- The search is by any text such as the title or description of the card 2.- The filters are dynamic, according to the type of product 3.- The category menu changes depending on the type of cards 4.- The cards change according to the type of product or the priority chosen 5.- When scrolling on the screen, more cards are loaded

My problem is that I could not re-write the React JS code with React-Redux.

I have only managed to load all the components initially and I have not managed to change the products and the category menu when they click on a priority and other events that involve a change in several components at the same time.

If you could help me by exemplifying with a bit of code how the interaction of these components could do.

ProductsActions.ts

export function loadProducts(data, webUrl) {
    console.log('Load Products...');
    if(data == null) {
        return function(dispatch) {
            return Data.getProducts().then(products => {
                dispatch({
                    type: ActionTypes.LoadProducts,
                    cards
                });
            });
        }
    }
}

productsReducer.ts

export default function productsReducer(state = initalState.products, action) {
    switch(action.type) {
            case ActionTypes.LoadProducts:
                let allProducts = [...state, ...action.products];
                return objectAssign(
                    {},
                    state,
                    {
                        products: allProducts
                    }
        );
            default:
                return state;
    }
}

productsContainer.ts

export default connect(
    (state) => {
        console.log(state);
        return {
            products: state.filterProducts
        };
    }
)(ProductsViewer);

Dashboard.tsx

export default class Dashboard extends React.Component<{Some Props}> {
  public render(): React.ReactElement<{Some Props}> {
    return (
      <div>
        <SearchBar />
        <Notifications />
        <Filters />
        <MenuCategory />
        <ProductsContainer />
      </div>
    );
  }
}

But how do the actions and reducers interact so that when selecting a filter the list of products is filtered or when selecting the priority of a notification the menu of categories and the list of products are changed

spfx developer spfx developer · Accepted Answer · 2018-08-08T15:02:14

When you want to affect a property of the state from multiple reducers you must manage the actions in a single reducer.

When clicking on a product type the action was handled in the MenuCategory reducer, but now it is done in the product reducer:

ProductsReducer.ts

export default function productsReducer(state = [], action) {
    switch(action.type) {
            case ActionTypes.LoadProducts:
                let allProducts = [...state, ...action.products];
                return objectAssign(
                    {},
                    state,
                    {
                        products: allProducts
                    }
                );
            case ActionTypes.ViewProductsByType:
                console.log(state);
                return objectAssign(
                    {},
                    state,
                    {
                    typeProducts: action.pType
                    }
                );
            default:
            return state;
    }
}

Handling the click event when selecting a product type was done with a bindActionCreators

MenuCategoryContainer.ts

import { connect } from "react-redux";
import { bindActionCreators } from "../../../../node_modules/redux";
import { viewCardByType } from "../actions/menuCategoryActions";
import { loadCategoryMenu } from '../reducers';
import MenuCategory from '../components/menuCategory/MenuCategory';

export default connect(
    (state) => {
        console.log(state);
        return {
            menuItems: loadCategoryMenu(state)
        };
    }, (dispatch) => {
        return {
            onClickType: bindActionCreators(viewProductByType, dispatch)
        };
    }
)(MenuCategory);

In this way I was able to affect a single property in a single state of the reducer when it comes from different components, I hope it is the right way to do it

How do I change SPFx and Reactjs to SPFx React-Redux?

1 Answers