Skip to content
Snippets Groups Projects
Commit 22c8856a authored by Seong-June Kim's avatar Seong-June Kim
Browse files

Re-organize code into separate actions and reducers folders.

parent 7369546b
Branches
Tags
No related merge requests found
......@@ -6,11 +6,24 @@ To run the module, first make sure you are in this directory (`minimal_redux_poc
1. Run `npm install` to install the dependencies.
1. Run the `npm run build:umd` task. This will produce an "isomorphic" webpack bundle of the module that can run in the console or browser. The bundle will be called `index.umd.js` and is placed in this same directory.
1. Open a nodejs console (type `node`) in this directory.
1. Require the module under a variable name, for example, `state = require('./index.umd')`.
1. The exported module currently has most of its functionality under the "store" property, so you may prefer to include it with `state = require('./index.umd').store`.
1. Import variable names from the module, for example, `let { store, actions } = require('./index.umd')`.
1. The exported module currently has most of its functionality under the "store" property, so you may prefer to include it with `let state = require('./index.umd').store`.
### Example Action
To increment the canvas index run:
Add a window:
```javascript
store.dispatch(actions.addWindow());
```
`state.store.dispatch({type: "INCREMENT"})`
To focus a window run:
```javascript
store.dispatch(actions.focusWindow('window-1'))
```
### Check current state
```javascript
store.getState()
```
const ActionTypes = {
FOCUS_WINDOW: 'FOCUS_WINDOW',
REQUEST_MANIFEST: 'REQUEST_MANIFEST',
RECEIVE_MANIFEST: 'RECEIVE_MANIFEST',
ADD_MANIFEST: 'ADD_MANIFEST',
ADD_WINDOW: 'ADD_WINDOW',
NEXT_CANVAS: 'NEXT_CANVAS',
PREVIOUS_CANVAS: 'PREVIOUS_CANVAS',
REMOVE_WINDOW: 'REMOVE_WINDOW',
PICK_WINDOWING_SYSTEM: 'PICK_WINDOWING_SYSTEM'
};
export default ActionTypes;
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const REQUEST_MANIFEST = 'REQUEST_MANIFEST';
export const RECEIVE_MANIFEST = 'RECEIVE_MANIFEST';
export const ADD_MANIFEST = 'ADD_MANIFEST';
export const ADD_WINDOW = 'ADD_WINDOW';
export const MOVE_WINDOW = 'MOVE_WINDOW';
export const PICK_WINDOWING_SYSTEM = 'PICK_WINDOWING_SYSTEM';
// Topics for understanding
// redux modules for nested stores
// state normalisation
// (normalizer library)
import ActionTypes from '../action-types';
/*
* Action creators
*/
export function focusWindow(windowId) {
return { type: ActionTypes.FOCUS_WINDOW, windowId };
}
export function addWindow() {
return { type: ActionTypes.ADD_WINDOW };
}
export function removeWindow(windowId) {
return { type: ActionTypes.REMOVE_WINDOW, windowId };
}
export function nextCanvas(windowId) {
return { type: ActionTypes.NEXT_CANVAS, windowId };
}
export function previousCanvas(windowId) {
return { type: ActionTypes.PREVIOUS_CANVAS, windowId };
}
export default {
collectionIndex: 0,
manifestIndex: 0,
sequenceIndex: 0,
canvasIndex: 0,
rangeId: null,
xywh: null,
rotation: null
}
import { createStore } from 'redux';
import * as ActionTypes from './actionTypes'
import initialState from './coreState'
// import { actions } from './actions';
/**
* This is a reducer, a pure function with (state, action) => state signature.
* It describes how an action transforms the state into the next state.
*
* The shape of the state is up to you: it can be a primitive, an array, an object,
* or even an Immutable.js data structure. The only important part is that you should
* not mutate the state object, but return a new object if the state changes.
*
* In this example, we use a `switch` statement and strings, but you can use a helper that
* follows a different convention (such as function maps) if it makes sense for your
* project.
*/
// Topics for understanding
// redux modules for nested stores
// state normalisation
// (normalizer library)
function stateCore(state = initialState, action) {
switch (action.type) {
case ActionTypes.INCREMENT:
console.log('incremented');
return Object.assign(state,{
canvasIndex: state.canvasIndex + 1
});
case ActionTypes.DECREMENT:
console.log('decrement');
return Object.assign(state,{
canvasIndex: state.canvasIndex - 1
});
default:
return state;
}
}
import { createStore } from 'redux';
import { rootReducer } from './reducers/index';
import * as ActionCreators from './actions';
// import * as Actions from './actions';
// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
export const store = createStore(stateCore);
export const store = createStore(rootReducer);
export const actions = ActionCreators;
// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.
/*
* You can use subscribe() to update the UI in response to state changes.
* Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
* However it can also be handy to persist the current state in the localStorage.
*/
// store.subscribe(() =>
// console.log(store.getState())
// )
store.subscribe(() => console.log('Current state:', store.getState()));
This diff is collapsed.
import { combineReducers } from 'redux';
import ActionTypes from '../action-types';
import { workspaceReducer } from './workspace';
import { windowsReducer } from './windows';
import { manifestsReducer } from './manifests';
/**
* This is a reducer, a pure function with (state, action) => state signature.
* It describes how an action transforms the state into the next state.
*
* The shape of the state is up to you: it can be a primitive, an array, an object,
* or even an Immutable.js data structure. The only important part is that you should
* not mutate the state object, but return a new object if the state changes.
*
* In this example, we use a `switch` statement and strings, but you can use a helper that
* follows a different convention (such as function maps) if it makes sense for your
* project.
*/
export const rootReducer = combineReducers({
workspace: workspaceReducer,
windows: windowsReducer,
manifests: manifestsReducer
});
import ActionTypes from '../action-types';
export const manifestsReducer = (state = [], action) => {
switch (action.type) {
default: return state;
}
};
import ActionTypes from '../action-types';
const initialWindowState = {
canvasIndex: 0
};
export const windowsReducer = (state = [], action) => {
console.log('Reducing', action.type);
switch (action.type) {
case ActionTypes.ADD_WINDOW:
const window = {
id: `window.${new Date().valueOf()}`
};
return state.concat(Object.assign({}, initialWindowState, window));
case ActionTypes.REMOVE_WINDOW:
return state.filter(window => window.id !== action.windowId);
case ActionTypes.NEXT_CANVAS:
return state.map(window => {
if (window.id === action.windowId) {
return Object.assign({}, window, { canvasIndex: window.canvasIndex + 1 });
} else {
return window;
}
});
case ActionTypes.PREVIOUS_CANVAS:
return state.map(window => {
if (window.id === action.windowId) {
return Object.assign({}, window, { canvasIndex: window.canvasIndex - 1 });
} else {
return window;
}
});
default:
return state;
}
};
import ActionTypes from '../action-types';
export const workspaceReducer = (state = {}, action) => {
console.log('Reducing', action.type);
switch (action.type) {
case ActionTypes.FOCUS_WINDOW:
return Object.assign({}, state, {focusedWindowId: action.windowId});
default:
return state;
}
};
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment