React Redux Example and Source Code

React - Redux

     Redux is a pattern and library for managing and updating application state. using events called "actions.". It servers as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion. 

01. ACTION (   What to do? )

02. REDUCER ( how to do? )

03. STORE ( object with holds the state of the application )

04. Functions associated with Store ( createStore(), dispatch(action), getState() )

REDUX BASIC

Github Source Code Link

Filter Folder Structure

Components --> Home.js

import React from 'react'
function Home(props) {
    return (
        <div>           
            <h1>Home Component</h1>
            <div className="cart-wrapper">
                <div className="img-wrapper item">
                    <img src="https://clipart.info/images/ccovers/1505918651the-iphone-x-ten-10-png.png" />
                </div>
                <div className="text-wrapper item">
                    <span>
                        I-Phone
                    </span>
                    <span>
                        Price: $1000.00
                    </span>
                </div>
                <div className="btn-wrapper item">
                    <button 
                    onClick={
                        ()=>{props.addToCartHandler({pice:1000,name:'i phone 11'})}
                        }>
                        Add To Cart</button>
                </div>
            </div>
        </div>
    )
}
export default Home

Component --> Header.js

import React from 'react'
function Header(props) {
    console.warn(props.data)
    return (
        <div>
            <div className="add-to-cart">
                <span className="cart-count">{props.data.length}</span>
                    <img src="https://www.pngkit.com/png/detail/829-8299026_cart-png-photos-shopping-cart-icon-png.png" alt="image"  />
            </div>
        </div>
    )
}
export default Header

Containers --> HeaderContainer.js

import Header from '../components/Header'
import {connect} from 'react-redux'
const mapStateToProps=state=>({
    data:state.cardItems
})
const mapDispatchToProps=dispatch=>({
})
export default connect(mapStateToProps,mapDispatchToProps)(Header)
// export default Home;

Containers --> HomeContainer.js

import Home from '../components/Home'
import {connect} from 'react-redux'
import {addToCart} from '../service/actions/actions'
const mapStateToProps=state=>({
    // data:state.cardItems
})
const mapDispatchToProps=dispatch=>({
    addToCartHandler:data=>dispatch(addToCart(data))
})
export default connect(mapStateToProps,mapDispatchToProps)(Home)
// export default Home;

service --> actions --> actions.js

import {ADD_TO_CART} from '../constants'
export const addToCart =(data)=>{
    // console.warn("action",data)
    return {
        type:ADD_TO_CART,
        data:data
    }
}

service --> reducers --> index.js

import {combineReducers} from 'redux'
import cardItems from './reducer'
export default combineReducers({
    cardItems,
})

service --> reducers --> reducer.js

import { ADD_TO_CART } from '../constants'
const initialState = {
    cardData: []
}
export default function cardItems(state = [], action) {
    switch (action.type) {
        case ADD_TO_CART:
            // console.warn("reducer",action)
            return [
                ...state,
                {cardData: action.data}
            ]
        default:
            return state
    }
}

service --> constants.js

export const ADD_TO_CART="ADD_TO_CART"

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// 
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import rootReducer from './service/reducers/index'
const store=createStore(rootReducer)
// 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();