Day 15 of #100DaysOfCode: TypeScript + CRA + Redux (use useSelect and useDispatch instead of connect)

#100daysofcode #typescript #redux #react

Introduction

We have learned different ways to use Redux

Redux on Day 12 (connect)
Redux on Day 14 (useSelect and useDispatch)

Today we learn how to use Redux with TypeScript

Installation

yarn create react-app react-redux-ts --template typescript

Roles

1.Reducer and actions

As same as Day 14
The only difference is to add interfaces on Reducer, Action, and State

const { combineReducers, Action } = Redux;

//types
const GET_PRODUCTS = 'GET_PRODUCTS';
type GetProductsAction = Action<typeof GET_PRODUCTS>;

//state
interface ProductsState {
    products: array;
}
const initState = {
    products: [],
}

//reducer
const ShoppingCartReducer = (state: ProductsState = initState, action: GetProductsAction) => {
    switch(action.type) {
        case GET_PRODUCTS:
            return {
                ...state,
                products: action.payload
            }
        default:
            return state; 
    }
} 

const rootReducer = combineReducers({
    products: ShoppingCartReducer
});

type RootState = ReturnType<typeof rootReducer>;

//action
const getProducts = ():GetProductsAction => ({
    type: GET_PRODUCTS, 
    payload: [{
        category: 'food',
        name: 'noodles',
        size:'large',
        price:100      
    },{
        category: 'food2',
        name: 'noodles',
        size:'small',
        price:50      
    },{
        category: 'food',
        name: 'rice',
        size:'large',
        price:120      
    }]
});

2.store

As same as Day 14

const { createStore } = Redux;

//store
const store = createStore(
    rootReducer
);

3.Provider and the parent component

As same as Day 14

const { Provider} = ReactRedux;

const app = (
    <Provider store={ store }>
        <ContentContainer/>
    </Provider>
);

4.The child component and useSelect, useDispatch

As same as Day 14

const { useDispatch, useSelector } = ReactRedux;
const selectProducts = (rootState) => rootState.products.products;

//child component
const Content = () => {
    const disPatch = useDispatch();
  disPatch(getProducts());
    return (
        <Menu/>
    )
}

const Menu = () => {
   const products = useSelector(selectProducts);
   return (
        <div className="container menu-container">
            <div className="row">
                {products.map(product => (
                    <MenuItem product = {product}/>
                ))}
            </div>
        </div>
    )
}