loading...
Cover image for Day 15 of #100DaysOfCode: TypeScript + CRA + Redux (use useSelect and useDispatch instead of connect)

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

jenhsuan profile image Jen-Hsuan Hsieh Updated on ・2 min read

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>
    )
}

Implementations

Articles

There are some of my articles. Feel free to check if you like!

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh

@jenhsuan

6+ year work experience in the software engineering field. 2+ year work experience with front-end JavaScript framework like React.js, Knockout.js. and Microsoft solution.

Discussion

markdown guide