<file_sep>import React from 'react'

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'

// reducers
import countReducer from './Reducers/countReducer'
import modalReducer from './Reducers/modalReducer'
import productReducer from './Reducers/productReducer'

// Components
import Counter from './Component/Counter'
import Modal from './Component/Modal'
import Products from './Component/Products'

const Middlewares = [thunk]

export default function App() {
    const Store = createStore( combineReducers({
        countState: countReducer,
        modalState: modalReducer,
        productState: productReducer
    }), composeWithDevTools(applyMiddleware(...Middlewares)) )
    return (
        <Provider store={Store}>
            <Counter />
            <Modal />
            <Products />
        </Provider>
    )
}
<file_sep>
import { DECREACE, INCREASE, RESET}  from '../Actions/ActionsTypes'

const defaultState= {
    count :0,
    name: 'Youssef'
}

const reducer = (state = defaultState, action)=>{
    switch(action.type){
        case INCREASE:
            return {...state, count: ++state.count }
        case DECREACE:
            return {...state, count: --state.count }
        case RESET:
            return {...state, count: 0 }
        default:
            return state
    }
}

export default reducer;<file_sep>
import React from 'react'
import PropTypes from 'prop-types'

import { connect } from 'react-redux'
import { modelOpen, modelClose } from '../Actions/ActionsCreators'

function Modal({isOpen, name, text, modelClose}) {
    return (
        <div className={`modal-overlay ${isOpen && 'isModalOpen'}`}>
            <div className="modal-container">
                <h4>{name}</h4>
                <p>{text}</p>
                <button 
                    onClick={modelClose}
                    className="btn"
                >
                    Close
                </button>
            </div>
        </div>
    )
}

Modal.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    name: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
}

export default connect(( {modalState:{isOpen, name, text}} )=> (
    {isOpen, name, text}
    ), {
        modelOpen,
        modelClose
})(Modal)<file_sep>import React from 'react';
import PropTypes from 'prop-types';

import {connect} from 'react-redux';
import {decrease, increase, reset, modelOpen} from '../Actions/ActionsCreators';

const Counter = ({ count, name, decrease, increase, reset}) => {
    return (
        <div className="container">
            <div>
                <h1 className="section-title">Counter</h1>
                <h2>{name}</h2>
                <p className="counter">{count}</p>
                
                <div className="buttons">
                    <button className="btn" onClick={decrease}>
                        decrease
                    </button>
                    <button className="btn" onClick={reset}>
                        reset
                    </button>
                    <button className="btn" onClick={increase}>   
                        increase
                    </button>
                </div>
                
            </div>
        </div>
    );
};

Counter.propTypes = {
    name: PropTypes.string.isRequired,
    count: PropTypes.number.isRequired,
};

const mapDsipatchToProps = (dispatch) => {
    return {
        increase: () => dispatch (increase ()),
        decrease: () => dispatch (decrease ()),
        reset: () => {
            dispatch (reset())
            dispatch (
                modelOpen (
                'youssef',
                'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed quis totam saepe mollitia tempore, modi eveniet repellat! Odio, non!'
                )
            );
        }
    };
};

export default connect ( ({countState:{name, count}})=>({ name, count }), mapDsipatchToProps) (Counter);
<file_sep>
import { LOADING, GET_PRODUCT } from '../Actions/ActionsTypes'

const defaultState = {
    loading: false,
    products: []
}

const reducer = (state=defaultState, action)=>{
    if(action.type === LOADING){
        return { ...state, loading: true, products:[] }
    }
    if(action.type === GET_PRODUCT){
        return { ...state, loading: false, products: action.payload }
    }
    return state
}
export default reducer