moshiurse/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redux Plain</title>
</head>
<body>

    <input type="text" id="userInput">
    <button id="addUserBtn">Add User</button>

    <ul id="userList">

    </ul>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.0-alpha.0/redux.min.js" integrity="sha512-6WJ7yVV5HDZwZ0RT5CM3FCTgTt5qC5BlfQ9bG43y0BowT5a3GXQqDYaoZgCk+i9vuB1Yj6KdBPQAU8Ra7tV32w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</body>

</html>

## index.js
const reducer = (state = [], action) => {
    // console.log('Reducers', state, action);
    switch(action.type) {
        case 'ADD_USER':
            return [...state, action.payload];
        break;
    }
    return state;
}
const store = Redux.createStore(reducer);

// store.subscribe( () => {
//     console.log('Subscribed', store.getState());
// })

// store.dispatch({ type: 'ADD_USER', payload: 'MOshiur' });
// store.dispatch({ type: 'ADD_USER', payload: 'Mahin' });
// store.dispatch({ type: 'ADD_USER', payload: 'Jewel' });

const userInput = document.getElementById('userInput');
const addUserBtn = document.getElementById('addUserBtn');
const userList = document.getElementById('userList');

store.subscribe( () => {
    userList.innerHTML = '';
    userInput.value = '';

    store.getState().forEach( (user) => {
        const li = document.createElement('li');
        li.textContent = user;
        userList.appendChild(li);
    })
})

addUserBtn.addEventListener('click', () => {
    store.dispatch({ type: 'ADD_USER', payload: userInput.value });
})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Redux Plain</title>
	</head>
	<body>

	<input type="text" id="userInput">
	<button id="addUserBtn">Add User</button>

	<ul id="userList">

	</ul>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.0-alpha.0/redux.min.js" integrity="sha512-6WJ7yVV5HDZwZ0RT5CM3FCTgTt5qC5BlfQ9bG43y0BowT5a3GXQqDYaoZgCk+i9vuB1Yj6KdBPQAU8Ra7tV32w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="index.js"></script>
	</body>

	</html>
	const reducer = (state = [], action) => {
	// console.log('Reducers', state, action);
	switch(action.type) {
	case 'ADD_USER':
	return [...state, action.payload];
	break;
	}
	return state;
	}
	const store = Redux.createStore(reducer);

	// store.subscribe( () => {
	// console.log('Subscribed', store.getState());
	// })

	// store.dispatch({ type: 'ADD_USER', payload: 'MOshiur' });
	// store.dispatch({ type: 'ADD_USER', payload: 'Mahin' });
	// store.dispatch({ type: 'ADD_USER', payload: 'Jewel' });

	const userInput = document.getElementById('userInput');
	const addUserBtn = document.getElementById('addUserBtn');
	const userList = document.getElementById('userList');

	store.subscribe( () => {
	userList.innerHTML = '';
	userInput.value = '';

	store.getState().forEach( (user) => {
	const li = document.createElement('li');
	li.textContent = user;
	userList.appendChild(li);
	})
	})

	addUserBtn.addEventListener('click', () => {
	store.dispatch({ type: 'ADD_USER', payload: userInput.value });
	})