Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 06fc11e

Browse files
Pass initial data from Rails to Redux store
1 parent 76a7482 commit 06fc11e

File tree

9 files changed

+58
-38
lines changed

9 files changed

+58
-38
lines changed

‎app/controllers/pages_controller.rb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
class PagesController < ApplicationController
22
def index
3+
@comments = Comment.all
34
end
45
end

‎app/views/pages/index.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@
1616
</li>
1717
</ul>
1818
<hr/>
19-
<%= react_component('App', {}, generator_function: true, prerender: true) %>
19+
<%= react_component('App', @comments, generator_function: true, prerender: true) %>

‎client/app/startup/ClientApp.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
22
import { Provider } from 'react-redux';
33

4-
import commentsStore from '../stores/commentsStore';
4+
import createStore from '../stores/commentsStore';
55
import CommentScreen from '../components/CommentScreen';
66

7-
const App = () => {
7+
const App = props => {
8+
const store = createStore(props);
89
const reactComponent = (
9-
<Provider store={commentsStore}>
10+
<Provider store={store}>
1011
{() => <CommentScreen />}
1112
</Provider>
1213
);

‎client/app/startup/ServerApp.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React from 'react';
22
import { Provider } from 'react-redux';
33

4-
import commentsStore from '../stores/commentsStore';
4+
import createStore from '../stores/commentsStore';
55
import CommentScreen from '../components/CommentScreen';
66

7-
const App = () => {
7+
const App = props => {
8+
const store = createStore(props);
89
const reactComponent = (
9-
<Provider store={commentsStore}>
10+
<Provider store={store}>
1011
{() => <CommentScreen />}
1112
</Provider>
1213
);
1314
return reactComponent;
1415
};
1516

16-
// Export is needed for the hot reload server
1717
export default App;

‎client/app/stores/commentsStore.js‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,23 @@ import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
22
import thunkMiddleware from 'redux-thunk';
33
import loggerMiddleware from '../middlewares/loggerMiddleware';
44
import reducers from '../reducers';
5+
import { initalStates } from '../reducers';
56

6-
// applyMiddleware supercharges createStore with middleware:
7-
const reducer = combineReducers(reducers);
8-
const composedStore = compose(
9-
applyMiddleware(thunkMiddleware, loggerMiddleware)
10-
);
11-
const storeCreator = composedStore(createStore);
12-
const store = storeCreator(reducer);
7+
export default props => {
8+
const initialComments = props;
9+
const { $$commentsState } = initalStates;
10+
const initialState = {
11+
$$commentsStore: $$commentsState.merge({
12+
$$comments: initialComments,
13+
}),
14+
};
1315

14-
export default store;
16+
const reducer = combineReducers(reducers);
17+
const composedStore = compose(
18+
applyMiddleware(thunkMiddleware, loggerMiddleware)
19+
);
20+
const storeCreator = composedStore(createStore);
21+
const store = storeCreator(reducer, initialState);
22+
23+
return store;
24+
};

‎client/index.html‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎client/index.jade‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
doctype html
2+
html
3+
4+
head
5+
title Hello, React
6+
7+
body
8+
9+
#app
10+
11+
script(src="vendor-bundle.js")
12+
script(src="app-bundle.js")
13+
script.
14+
React.render(App(!{props}), document.getElementById('app'));

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
"expose-loader": "^0.7.0",
6969
"express": "^4.13.3",
7070
"file-loader": "^0.8.4",
71+
"jade": "^1.11.0",
7172
"jscs": "^2.1.1",
7273
"node-sass": "^3.3.2",
7374
"react-hot-loader": "^1.3.0",

‎client/server.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
var bodyParser = require('body-parser');
33
var webpack = require('webpack');
44
var WebpackDevServer = require('webpack-dev-server');
5-
var config = require('./webpack.client.hot.config');
5+
var jade = require('jade');
66
var sleep = require('sleep');
7+
var config = require('./webpack.client.hot.config');
78

89
var comments = [
9-
{author: 'Pete Hunt', text: 'Hey there!'},
10-
{author: 'Justin Gordon', text: 'Aloha from @railsonmaui'},
10+
{author: 'Pete Hunt', text: 'Hey there!'},
11+
{author: 'Justin Gordon', text: 'Aloha from @railsonmaui'},
1112
];
1213

1314
var server = new WebpackDevServer(webpack(config), {
1415
publicPath: config.output.publicPath,
1516
hot: true,
16-
noInfo: false,
17+
historyApiFallback: true,
1718
stats: {
1819
colors: true,
1920
hash: false,
@@ -41,10 +42,16 @@ server.app.post('/comments.json', function(req, res) {
4142
res.send(JSON.stringify(req.body.comment));
4243
});
4344

44-
server.listen(3000, 'localhost', function(err) {
45-
if (err) {
46-
console.log(err);
47-
}
45+
server.app.use('/', function(req, res) {
46+
var locals = {
47+
props: JSON.stringify(comments),
48+
};
49+
var layout = process.cwd() + '/index.jade';
50+
var html = jade.compileFile(layout, { pretty: true })(locals);
51+
res.send(html);
52+
});
4853

54+
server.listen(3000, 'localhost', function(err) {
55+
if (err) console.log(err);
4956
console.log('Listening at localhost:3000...');
5057
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /