when learning react redux , introduce react-thunk middleware
error message
create-react-app
//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./store.js";
import {addToCart,updateCart,deleteFromCart} from "./actions/cart-actions";
import {Provider} from "react-redux";
store.dispatch(addToCart("Coffee 500gm", 1, 250));
store.dispatch(addToCart("Flour 1kg", 2, 110));
store.dispatch(addToCart("Juice 2L", 1, 250));
store.dispatch(updateCart("Flour 1kg", 5, 110));
store.dispatch(deleteFromCart("Coffee 500gm"));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
// App.js
import React, { Component } from "react";
import {connect} from "react-redux"
import {addToCart} from "./actions/cart-actions"
const mapStateToProps = function(state){
return{
state:state
}
}
class App extends Component {
constructor(props){
super(props)
}
componentWillMount(){
console.log(this.props)
console.log(this.props.addToCart("",8,144))
setTimeout(() => {
console.log(this.props)
}, 3000);
}
render() {
return (
<div className="App">
App
</div>
);
}
}
export default connect(mapStateToProps,{addToCart})(App);//store.js
import {createStore,applyMiddleware} from "redux";
import rootReducer from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "react-thunk";
const middleware = [thunk];
let store = createStore(
rootReducer,
applyMiddleware(...middleware) //redux
);
export default store;//actions cart-actions.js
export const ADD_TO_CART = "ADD_TO_CART";
export const UPDATE_CART = "UPDATE_CART";
export const DELETE_FROM_CART ="DELETE_FROM_CART";
export function addToCart(product,quanlity,unitCost) {
return {
type:ADD_TO_CART,
payload:{product,quanlity,unitCost}
}
}
export function updateCart (product,quanlity,unitCost) {
return {
type:UPDATE_CART,
payload:{
product,
quanlity,
unitCost
}
}
}
export function deleteFromCart(product){
return {
type: DELETE_FROM_CART,
payload:{
product
}
}
}//reducers index.js
import {combineReducers} from "redux";
import productsReducer from "./products-reducer";
import cartReducer from "./cart-reducer";
const allreducers = {
products:productsReducer,
shoppingCart:cartReducer
}
const rootReducer = combineReducers(allreducers);
export default rootReducer;//reducers cart-reducer.js
import {ADD_TO_CART,UPDATE_CART,DELETE_FROM_CART} from "../actions/cart-actions";
const initialState = {
cart : [
{
product: "bread 700g",
quantity: 2,
unitCost: 90
},
{
product: "milk 500ml",
quantity: 1,
unitCost: 47
}
]
}
export default function(state = initialState,action){
switch (action.type){
case ADD_TO_CART :{
return{
...state,
cart:[...state.cart,action.payload]
}
}
case UPDATE_CART :{
return {
...state,
cart : state.cart.map((item)=>{
return item.product===action.payload.product?action.payload:item;
})
}
}
case DELETE_FROM_CART :{
return{
...state,
cart:state.cart.filter((item)=>{
return item.product!==action.payload.product
})
}
}
default:
return state;
}
}//reducers products-reducer.js
export default function(state=[],action){
return state;
}sources of topics and their own ideas
related codes
/ / Please paste the code text below (do not replace the code with pictures)