Commit d3beae3a authored by Sumaiyya Burney's avatar Sumaiyya Burney

Adds counter

parent 95f2cead
...@@ -6,3 +6,21 @@ ...@@ -6,3 +6,21 @@
export const sayHello = () => ({ export const sayHello = () => ({
type: "HELLO_REACT" type: "HELLO_REACT"
}) })
export const globalInc = () => ({
type: "GLOBAL_INCREMENT"
})
export const globalDec = () => ({
type: "GLOBAL_DECREMENT"
})
export const addToCart = (selectedSku) => ({
type: "ADD_TO_CART",
selectedSku: selectedSku
})
export const removeFromCart = (selectedSku) => ({
type: "REMOVE_FROM_CART",
selectedSku: selectedSku
})
\ No newline at end of file
import React from 'react' import React from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { sayHello } from '../actions' import { globalDec, globalInc, sayHello } from '../actions'
let Button = ({ whatsUp, stateObject, saySomething }) => ( let Button = ({ whatsUp, stateObject, saySomething, globalIncrement, globalDecrement, count }) => (
<div > <div >
<button onClick={saySomething}>PRESS TO DISPATCH FIRST ACTION</button> <button onClick={saySomething}>PRESS TO DISPATCH FIRST ACTION</button>
<h2>{whatsUp}</h2> <h2>{whatsUp}</h2>
<button onClick={() => console.log('Redux State:',stateObject)} >Press to inspect STATE in console panel</button> <button onClick={() => console.log('Redux State:',stateObject)} >Press to inspect STATE in console panel</button>
<h2>{count}</h2>
<button onClick={globalIncrement}>Increment</button>
<button onClick={globalDecrement}>Decrement</button>
</div> </div>
) )
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
whatsUp: state.say, whatsUp: state.say,
stateObject: state stateObject: state,
count: state.count
}) })
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
saySomething: () => { dispatch(sayHello())} saySomething: () => { dispatch(sayHello())},
globalIncrement: () => { dispatch(globalInc())},
globalDecrement: () => { dispatch(globalDec())}
}) })
Button = connect( Button = connect(
......
...@@ -5,8 +5,9 @@ import { Provider } from 'react-redux' ...@@ -5,8 +5,9 @@ import { Provider } from 'react-redux'
import reducer from './reducers' import reducer from './reducers'
import './css/styles.css' import './css/styles.css'
import App from "./components/App" import App from "./components/App"
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer) const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
render( render(
<Provider store={store}> <Provider store={store}>
......
const reducer = (state = {}, action) => { const reducer = (state = {count: 0, cart: []}, action) => {
switch (action.type) { switch (action.type) {
case 'HELLO_REACT': case 'HELLO_REACT':
return { ...state, say : 'Hello World Redux' }; return { ...state, say : 'Hello World Redux' };
case 'GLOBAL_INCREMENT':
return { ...state, count : state.count + 1 };
case 'GLOBAL_DECREMENT':
return { ...state, count : state.count - 1 };
case 'ADD_TO_CART':
return {...state, cart : [state.cart.concat(action.selectedSku)]}
case 'REMOVE_FROM_CART':
return{ ...state, cart : [...state.cart.slice(0, action.selectedSku),
...state.cart.slice(action.selectedSku + 1)] }
default: default:
return state; return state;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment