https://github.com/xizon/redux-standalone-fundamentals-beginner__increment-decrement
Redux standalone - Simple counter principle
https://github.com/xizon/redux-standalone-fundamentals-beginner__increment-decrement
redux
Last synced: about 2 months ago
JSON representation
Redux standalone - Simple counter principle
- Host: GitHub
- URL: https://github.com/xizon/redux-standalone-fundamentals-beginner__increment-decrement
- Owner: xizon
- License: mit
- Created: 2022-02-14T04:48:14.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-14T04:48:21.000Z (about 3 years ago)
- Last Synced: 2025-01-14T12:49:59.035Z (3 months ago)
- Topics: redux
- Language: JavaScript
- Homepage:
- Size: 109 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-standalone-fundamentals-beginner__increment-decrement
[English](README.md) | [中文](README_CN.md)
---
Redux standalone - Simple counter principle
## File Structures
```sh
src/
├── reducers.js
└── index.js (Entry file, for client/browser)
```
## Installation And Test
**Step 1.** First, using an absolute path into your app folder directory.
```sh
$ cd /{your_directory}/redux-standalone-fundamentals-beginner__increment-decrement
```
**Step 2.** Before doing all dev stuff make sure you have `Node 14+` installed. After that, run the following code in the main directory to install the node module dependencies.
```sh
$ sudo npm install
```
**Step 3.** Run this project with `create-react-app`
```sh
$ npm run start
```
**Step 4.** When you done, this will spin up a server that can be accessed at
```sh
http://localhost:3000
```
---
### index.js
```js
//store
import { createStore } from 'redux';
import countReducer from './reducers.js'
/*
Output:
{
count: 0
}
*/
const store = createStore(countReducer);
// Whenever the store state changes, update the UI by
// reading the latest store state and showing new data
function render() {
const state = store.getState();
console.log('state: ', state);
}
// Update the UI with the initial data
render();
// And subscribe to redraw whenever the data changes in the future
store.subscribe(render);
//
function render(res) {
document.getElementById('root').innerHTML = JSON.stringify(res);
}
render(store.getState());
//actions
document.getElementById('button-1').addEventListener( 'click', function(e) {
store.dispatch({ type: 'INCREMENT' });
render(store.getState());
});
document.getElementById('button-2').addEventListener( 'click', function(e) {
store.dispatch({ type: 'DECREMENT' });
render(store.getState());
});
```
### reducers.js
```js
// Reducer
// Counter reaction
//---------
let initialState = {count: 0}
export default function countReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 }
case 'DECREMENT':
return { count: state.count - 1 }
default:
return state
}
}
```
### index.html
```html
Redux Standalone
You need to enable JavaScript to run this app.
increment
decrement
```