React Redux setup boilerplate

actionTypes.js

// src/store/actions/actionTypes.js


export const AUTH_SET_USER = 'AUTH_SET_USER'
export const COUNT_ADD = 'COUNT_ADD'
export const COUNT_SUB = 'COUNT_SUB'

App.jsx

// src/App.jsx


import React, { Component } from 'react';
import { connect } from 'react-redux'
import Count from './components/Count';
import Controller from './components/Controller'
import { login, logout } from "./store/actions/authActions";


class App extends Component {

    render() {

        return (
            <>
                <h1>Hello Redux</h1>
                { this.props.isAuthenticated ? (
                    <button onClick={() => this.props.logout()}>Logout</button>
                ) : (
                        <button onClick={() => this.props.login('farhad', 'pass123')}>Login</button>
                    )}
                <Count />
                <Controller />
            </>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.auth.isAuthenticated
    }
}

export default connect(mapStateToProps, { login, logout })(App)

authActions.js

// src/store/actions/authActions.js


import * as Types from './actionTypes'


const login = (username, password) => dispatch => {

    localStorage.setItem('username', username)
    localStorage.setItem('password', password)

    dispatch({type: Types.AUTH_SET_USER})

}


const logout = () => dispatch => {

    localStorage.removeItem('username')
    localStorage.removeItem('password')

    dispatch({type: Types.AUTH_SET_USER})
}


export {login, logout}

authReducer.js

// src/store/reducers/authReducer.js


import * as Types from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

function authReducer(state = initialState, action) {
    switch (action.type) {
        case Types.AUTH_SET_USER: {
            return {
                isAuthenticated: localStorage.getItem('username') ? true : false
            }
        }
        
        default: return state
    }
}

export default authReducer

Controller.jsx

// src/components/Controller.jsx


import React from 'react';
import {connect} from 'react-redux'
import * as Types from '../store/actions/actionTypes'


const Controller = (props) => {
    return (
        <div>
            <button onClick={() => props.add()}> + ADD </button>
            <button onClick={() => props.sub()}> - SUB </button>
        </div>
    );
}

function mapDispatchToProps(dispatch){
    return {
        add: () =>  dispatch({type: Types.COUNT_ADD}),
        sub: () =>  dispatch({type: Types.COUNT_SUB})
    }
}

export default connect(null, mapDispatchToProps)(Controller);

Count.jsx

// src/components/Count.jsx


import React from 'react';
import {connect} from 'react-redux'

const Count = (props) => {
    return (
        <h1>{props.count}</h1>
    );
}

function mapStateToProps(state){
    return {
        count: state.count.count
    }
}
 
export default connect(mapStateToProps)(Count);

countReducer.js

// src/store/reducers/countReducer.js


import * as Types from '../actions/actionTypes'

const initialState = {
    count: 0
}

function countReducer(state = initialState, action) {
    switch (action.type) {
        case Types.COUNT_ADD: {
            return {
                count: state.count + 1
            }
        }
        case Types.COUNT_SUB: {
            return {
                count: state.count - 1
            }
        }
        default: return state
    }
}

export default countReducer

index.js

// src/index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store'
import { Provider } from 'react-redux'
import * as Types from './store/actions/actionTypes'


store.dispatch({ type: Types.AUTH_SET_USER })

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

reportWebVitals();

package.json

{
    "name": "react-tut",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "react": "^17.0.1",
        "react-beautiful-dnd": "^13.0.0",
        "react-dnd": "^11.1.3",
        "react-dnd-html5-backend": "^11.1.3",
        "react-dom": "^17.0.1",
        "react-redux": "^7.2.2",
        "react-scripts": "4.0.0",
        "redux": "^4.0.5",
        "redux-thunk": "^2.3.0",
        "remote-redux-devtools": "^0.5.16",
        "web-vitals": "^0.2.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

rootReducer.js

// src/store/reducers/rootReducer.js


import { combineReducers } from "redux";

import authReducer from "./authReducer";
import countReducer from "./countReducer";



const rootReducer = combineReducers({
    count: countReducer,
    auth: authReducer
})

export default rootReducer

store-index.js

// src/store/index.js


import { createStore, compose, applyMiddleware } from "redux";
import rootReducer from './reducers/rootReducer'
import thunk from 'redux-thunk'


const middleWare = [thunk]


const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(...middleWare),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // remove this if error occured
    )
)

export default store