Initial redux setup.

This commit is contained in:
Daniel Scalzi 2020-05-06 07:35:25 -04:00
parent 28f78f719e
commit 3fcfa492af
No known key found for this signature in database
GPG Key ID: D18EA3FB4B142A57
13 changed files with 201 additions and 26 deletions

40
package-lock.json generated
View File

@ -1630,6 +1630,16 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dev": true,
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/html-minifier-terser": { "@types/html-minifier-terser": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.0.0.tgz",
@ -1700,6 +1710,18 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/react-redux": {
"version": "7.1.8",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.8.tgz",
"integrity": "sha512-kpplH7Wg2SYU00sZVT98WBN0ou6QKrYcShRaW+5Vpe5l7bluKWJbWmAL+ieiso07OQzpcP5i1PeY3690640ZWg==",
"dev": true,
"requires": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"@types/request": { "@types/request": {
"version": "2.48.4", "version": "2.48.4",
"resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.4.tgz", "resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.4.tgz",
@ -3209,9 +3231,9 @@
} }
}, },
"cacheable-lookup": { "cacheable-lookup": {
"version": "4.2.2", "version": "4.2.3",
"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.2.2.tgz", "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-4.2.3.tgz",
"integrity": "sha512-06EWjs5/UO+gl6RHW7UAajeMZ+5E+HvHLQtaKcpjJLE5S/3+pX28VClFXM+LCwFRcmODURMnO94bZ+lFy5YvRg==" "integrity": "sha512-NdruD8iCwUSqPeacly+fxbi71wjPuIbh9wsBhLdRmpXDFPgQtX+xWytveqDyFYQ1tDR5POAxH4jIkkoit3arXw=="
}, },
"cacheable-request": { "cacheable-request": {
"version": "7.0.1", "version": "7.0.1",
@ -7028,9 +7050,9 @@
} }
}, },
"got": { "got": {
"version": "11.1.0", "version": "11.1.1",
"resolved": "https://registry.npmjs.org/got/-/got-11.1.0.tgz", "resolved": "https://registry.npmjs.org/got/-/got-11.1.1.tgz",
"integrity": "sha512-9lZDzFe43s6HH60tSurUk04kEtssfLiIfMiY5lSE0+vVaDCmT7+0xYzzlHY5VArSiz41mQQC38LefW2KoE9erw==", "integrity": "sha512-7WxfuTyT02hMZZdDvaAprEoxsU13boxI8rWMpqk/5Mq6t+YVbExVB2L6yRLh2Nw3TeJyFpanId41+ZyXGesmbw==",
"requires": { "requires": {
"@sindresorhus/is": "^2.1.0", "@sindresorhus/is": "^2.1.0",
"@szmarczak/http-timer": "^4.0.0", "@szmarczak/http-timer": "^4.0.0",
@ -8167,9 +8189,9 @@
} }
}, },
"keyv": { "keyv": {
"version": "4.0.0", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.0.tgz", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.1.tgz",
"integrity": "sha512-U7ioE8AimvRVLfw4LffyOIRhL2xVgmE8T22L6i0BucSnBUyv4w+I7VN/zVZwRKHOI6ZRUcdMdWHQ8KSUvGpEog==", "integrity": "sha512-xz6Jv6oNkbhrFCvCP7HQa8AaII8y8LRpoSm661NOKLr4uHuBwhX4epXrPQgF3+xdJnN4Esm5X0xwY4bOlALOtw==",
"requires": { "requires": {
"json-buffer": "3.0.1" "json-buffer": "3.0.1"
} }

View File

@ -35,7 +35,7 @@
"electron-updater": "^4.3.1", "electron-updater": "^4.3.1",
"fs-extra": "^9.0.0", "fs-extra": "^9.0.0",
"github-syntax-dark": "^0.5.0", "github-syntax-dark": "^0.5.0",
"got": "^11.1.0", "got": "^11.1.1",
"jquery": "^3.5.1", "jquery": "^3.5.1",
"moment": "^2.25.3", "moment": "^2.25.3",
"request": "^2.88.2", "request": "^2.88.2",
@ -57,6 +57,7 @@
"@types/node": "^12.12.38", "@types/node": "^12.12.38",
"@types/react": "^16.9.23", "@types/react": "^16.9.23",
"@types/react-dom": "^16.9.7", "@types/react-dom": "^16.9.7",
"@types/react-redux": "^7.1.8",
"@types/request": "^2.48.4", "@types/request": "^2.48.4",
"@types/tar-fs": "^2.0.0", "@types/tar-fs": "^2.0.0",
"@types/triple-beam": "^1.3.0", "@types/triple-beam": "^1.3.0",

View File

@ -2,12 +2,49 @@ import { hot } from 'react-hot-loader/root';
import * as React from 'react'; import * as React from 'react';
import Frame from './frame/Frame'; import Frame from './frame/Frame';
import Welcome from './welcome/Welcome'; import Welcome from './welcome/Welcome';
import { connect } from 'react-redux';
import { View } from '../meta/Views';
import Landing from './landing/Landing';
import Login from './login/Login';
import Settings from './settings/Settings';
const Application = () => ( type ApplicationProps = {
<> currentView: View
}
class Application extends React.Component<ApplicationProps> {
render() {
switch(this.props.currentView) {
case View.WELCOME:
return <>
<Frame /> <Frame />
<Welcome /> <Welcome />
</> </>
); case View.LANDING:
return <>
<Frame />
<Landing />
</>
case View.LOGIN:
return <>
<Frame />
<Login />
</>
case View.SETTINGS:
return <>
<Frame />
<Settings />
</>
export default hot(Application); }
}
}
const connected = connect((state: any) => ({
currentView: state.currentView
}), undefined)(Application)
export default hot(connected);

View File

@ -0,0 +1,11 @@
import * as React from 'react'
export default class Landing extends React.Component {
render() {
return <>
LANDING TBD
</>
}
}

View File

@ -0,0 +1,11 @@
import * as React from 'react'
export default class Login extends React.Component {
render() {
return <>
LOGIN TBD
</>
}
}

View File

@ -0,0 +1,11 @@
import * as React from 'react'
export default class Settings extends React.Component {
render() {
return <>
SETTINGS TBD
</>
}
}

View File

@ -1,22 +1,27 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader'; import { AppContainer } from 'react-hot-loader';
import store from './redux/store'
import './index.css'; import './index.css';
import Application from './components/Application'; import Application from './components/Application';
import { Provider } from 'react-redux';
// Create main element // Create main element
const mainElement = document.createElement('div'); const mainElement = document.createElement('div');
document.body.appendChild(mainElement); document.body.appendChild(mainElement);
// Render components // Render components
const render = (Component: () => JSX.Element) => {
ReactDOM.render( ReactDOM.render(
<AppContainer> <AppContainer>
<Component /> <Provider store={store}>
<Application currentView={store.getState().currentView} />
</Provider>
</AppContainer>, </AppContainer>,
mainElement mainElement
); );
};
render(Application); // setTimeout(() => {
// console.log('firing')
// store.dispatch(setCurrentView(View.LOGIN))
// }, 2500)

View File

@ -0,0 +1,6 @@
export enum View {
LANDING = 'LANDING',
WELCOME = 'WELCOME',
LOGIN = 'LOGIN',
SETTINGS = 'SETTINGS'
}

View File

@ -0,0 +1,17 @@
import { View } from "../../meta/Views";
import { Action } from "redux";
export enum ViewActionType {
ChangeView = 'CHANGE_VIEW'
}
export interface ChangeViewAction extends Action {
payload: View
}
export function setCurrentView(view: View): ChangeViewAction {
return {
type: ViewActionType.ChangeView,
payload: view
}
}

View File

@ -0,0 +1,6 @@
import { combineReducers } from "redux";
import ViewReducer from "./viewReducer";
export default combineReducers({
currentView: ViewReducer
})

View File

@ -0,0 +1,16 @@
import { Reducer } from 'redux'
import { View } from '../../meta/Views'
import { ChangeViewAction, ViewActionType } from '../actions/viewActions'
const defaultView = View.WELCOME
const ViewReducer: Reducer<View, ChangeViewAction> = (state = defaultView, action) => {
switch(action.type) {
case ViewActionType.ChangeView:
console.log('Reducer fired')
return action.payload
}
return state
}
export default ViewReducer

View File

@ -0,0 +1,4 @@
import { createStore } from 'redux'
import reducer from './reducers'
export default createStore(reducer)

View File

@ -0,0 +1,28 @@
import { combineReducers, createStore, Reducer, Action, AnyAction } from 'redux'
const userReducer: Reducer<any, AnyAction> = (state = {name: 'Name1', age: 0}, action) => {
switch(action.type) {
case 'CHANGE_NAME':
return {...state, name: action.payload}
case 'CHANGE_AGE':
return {...state, age: action.payload}
}
return state
}
const tweetsReducer: Reducer<any, Action> = (state = [], action) => {
return state
}
const reducer = combineReducers({
user: userReducer,
tweets: tweetsReducer
})
const store = createStore(reducer)
store.dispatch({type: 'CHANGE_NAME', payload: 'Name2'})
store.dispatch({type: 'CHANGE_AGE', payload: 1})
export default store