├── .gitignore
├── README.md
├── app
├── constants
│ └── actionTypes.js
├── actions
│ └── status.js
├── app.js
├── reducers
│ └── statusReducer.js
└── store.js
├── webpack.config.js
├── index.html
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | .DS_Store
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Simples Redux example in vanilla JavaScript
--------------------------------------------------------------------------------
/app/constants/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const actionTypes = {
2 | CHANGE_STATUS: 'CHANGE_STATUS'
3 | };
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | entry: './app/app.js',
5 | output: {
6 | filename: 'bundle.js',
7 | path: path.resolve(__dirname, 'dist'),
8 | publicPath: 'dist'
9 | },
10 | devServer: {
11 | noInfo: true
12 | }
13 | }
--------------------------------------------------------------------------------
/app/actions/status.js:
--------------------------------------------------------------------------------
1 | import { actionTypes } from '../constants/actionTypes.js';
2 |
3 | export const changeStatus = userName =>
4 | dispatch =>
5 | setTimeout(() =>
6 | dispatch({
7 | type: actionTypes.CHANGE_STATUS,
8 | payload: `${userName} is typing`
9 | })
10 | , 1000);
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux with vanilla JavaScript
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/app/app.js:
--------------------------------------------------------------------------------
1 | import { store } from './store';
2 | import { changeStatus } from './actions/status';
3 |
4 | const statusParagraph = document.querySelector('.status');
5 |
6 | document
7 | .querySelector('.userName')
8 | .oninput = e => {
9 | const userName = e.target.value;
10 | store.dispatch(changeStatus(userName));
11 | };
12 |
13 | store.subscribe(() => {
14 | const state = store.getState();
15 | statusParagraph.textContent = state.status;
16 | });
--------------------------------------------------------------------------------
/app/reducers/statusReducer.js:
--------------------------------------------------------------------------------
1 | import { actionTypes } from '../constants/actionTypes';
2 |
3 | const initialState = { status: '' };
4 |
5 | export const statusReducer = (state = initialState, action) => {
6 |
7 | const status = action.payload;
8 |
9 | switch (action.type) {
10 | case actionTypes.CHANGE_STATUS:
11 | return Object.assign({}, state, { status });
12 | default:
13 | return state;
14 | }
15 | };
--------------------------------------------------------------------------------
/app/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware, compose } from 'redux';
2 | import { statusReducer } from './reducers/statusReducer';
3 | import { createLogger } from 'redux-logger';
4 | import thunk from 'redux-thunk';
5 |
6 | const middlewares = compose(
7 | applyMiddleware(thunk, createLogger()),
8 | window.devToolsExtension ? window.devToolsExtension() : f => f
9 | );
10 |
11 | export const store = createStore(statusReducer, middlewares);
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "webpack-dev-server"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "webpack": "^3.11.0",
15 | "webpack-dev-server": "^2.11.1"
16 | },
17 | "dependencies": {
18 | "redux": "^3.7.2",
19 | "redux-logger": "^3.0.6",
20 | "redux-thunk": "^2.2.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------