Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demonstrate koConnect to piggyback on identical mapStateToProps, etc. #13

Open
wants to merge 1 commit into
base: routed-email-app
Choose a base branch
from
Open

Demonstrate koConnect to piggyback on identical mapStateToProps, etc. #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions components/Emails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import koConnect from '../utils/koConnect.js'
import store from '../store/configureStore'

import MoveEmail from './MoveEmail'

Expand Down Expand Up @@ -58,3 +60,11 @@ const mapDispatchToProps = function(dispatch) {
}

export default connect(mapStateToProps, mapDispatchToProps)(Emails);

const emailsViewModel = function() {
this.emails = ko.observableArray([]);
this.fetchedAt = ko.observable(null);
koConnect(this, store, mapStateToProps, mapDispatchToProps);
}

export { emailsViewModel };
26 changes: 26 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<title>Redux Skeleton</title>
<style>
div.openEmail {
Expand Down Expand Up @@ -31,5 +33,29 @@
<div class="app" id="root">
</div>
<script src="/static/bundle.js"></script>


<div id="ko">
<h1>Emails (fetched at <span data-bind="text: fetchedAt"></span></h1><button data-bind="click: fetchEmails">Fetch</button>
<table>
<thead>
<tr>
<th>Subject</th>
<th>Sender</th>
<th>Folder</th>
<th>Delete</th>
</tr>
</thead>
<tbody data-bind="foreach: emails">
<tr>
<td data-bind="text: subject"></td>
<td data-bind="text: sender"></td>
<td data-bind="text: folderName"></td>
<td><button data-bind="click: function(email) { $parent.removeEmail(email.id) }")>Delete</button></td>
</tr>
</tbody>
</table>
</div>

</body>
</html>
11 changes: 8 additions & 3 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { DevTools, LogMonitor, DebugPanel } from 'redux-devtools/lib/react';
import App from './containers/App'
import configureStore, { USE_DEV_TOOLS } from './store/configureStore'
import store, { USE_DEV_TOOLS } from './store/configureStore'
import { Route, Router as RealRouter } from 'react-router'
import * as actions from './actions/';
import emailApp from './emailApp'
import Folders from './components/Folders'
import Folder from './components/Folder'
import Emails from './components/Emails'
import Emails, { emailsViewModel } from './components/Emails'
import EmailPreview from './components/EmailPreview'
import Counter from './components/Counter'
import generatePageLoaders from './pageLoaders'
Expand All @@ -29,7 +29,6 @@ class Router extends RealRouter {
}

window.emailApp = emailApp;
const store = configureStore();

const pageLoaders = generatePageLoaders(store.dispatch);

Expand Down Expand Up @@ -58,3 +57,9 @@ render(
</div>,
rootElement
)

const vm = new emailsViewModel();

$(document).ready(function() {
ko.applyBindings(vm, $('#ko')[0]);
});
4 changes: 3 additions & 1 deletion store/configureStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import thunk from 'redux-thunk';

export const USE_DEV_TOOLS = true;

export default function configureStore(initialState) {
let configureStore = function(initialState) {
let composed = compose(applyMiddleware(thunk));
if(USE_DEV_TOOLS) {
composed = compose(composed, devTools());
Expand All @@ -21,3 +21,5 @@ export default function configureStore(initialState) {

return store
}

export default configureStore();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's the purpose of exporting the called configureStore function here rather than just calling it where it's imported?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the KO example, the call to koConnect needed access to the store because there wasn't a top-level <Provider> component passing it around in context.

So, the call to koConnect either needed to be in the same file that configureStore() is called in (i.e. index.js previously), or we needed to put the result of calling configureStore in a place that was importable in multiple files (in this case, index.js and components/Email.js).

If we were actually building a Knockout-Redux app, we could probably do something like <Provider> and pass around a context to child view models like react-redux does, but for purposes of this example, it wasn't really important.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah gotcha

22 changes: 22 additions & 0 deletions utils/koConnect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const koConnect = function(viewModel, store, mapStateToProps, mapDispatchToProps) {
const applyState = function() {
const calculatedStateProps = mapStateToProps(store.getState());
Object.keys(calculatedStateProps).forEach((key) => {
if(viewModel[key]) {
viewModel[key](calculatedStateProps[key])
}
});

const calculatedDispatchProps = mapDispatchToProps(store.dispatch);
Object.keys(calculatedDispatchProps).forEach((key) => {
viewModel[key] = calculatedDispatchProps[key];
});
}
store.subscribe(function() {
applyState();
});
applyState();
}


export default koConnect;