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!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
Top comments (0)