redux_rails 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c80cec0ad4c8eec3d6d599700037c8c138f8fd3f
|
4
|
+
data.tar.gz: 5d1131af4afd5ca7fe3a6b1fd08f50b1f5f5aec7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 46a4c56021cca721c039eb47bd8d9b3714ff69a6b771ce3e9daf817513c71492eb720dadc9c160400362e4135ea43c80afdae5c85ef126db702ec7bd7de2c696
|
7
|
+
data.tar.gz: cd9dd9aee3dc339d130016df7861587486a5f1b7857688a12d20fd3c903000d9314f2759c70e1029b161ff9242680c2a8d65b1f7715442e3c6c5f28031c2dac8
|
data/README.md
CHANGED
@@ -1,15 +1,58 @@
|
|
1
1
|
# ReduxRails
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
## Highlights
|
4
|
+
- install, component and container generator
|
5
|
+
- react-router-dom
|
6
|
+
- redux-devtools-extension
|
7
|
+
|
8
|
+
### Install generator
|
9
|
+
- Installs a new #{your_app_name}.jsx file in app/javascript/packs with additional Redux setup options commented out for modifications.
|
10
|
+
- Links it to public/packs/manifest.json
|
11
|
+
#### Created folders/files
|
12
|
+
* app/javascript/src,
|
13
|
+
* app/javascript/src/reducer.js, `for your combineReducer`
|
14
|
+
|
15
|
+
###### Component folder
|
16
|
+
* app/javascript/src/components,
|
17
|
+
* app/javascript/src/components/app,
|
18
|
+
* app/javascript/src/components/app/app.js,
|
19
|
+
* app/javascript/src/components/app/app.scss
|
20
|
+
|
21
|
+
###### Container folder
|
22
|
+
* app/javascript/src/containers,
|
23
|
+
* app/javascript/src/containers/app,
|
24
|
+
* app/javascript/src/containers/app/app.js,
|
25
|
+
* app/javascript/src/containers/app/action.js,
|
26
|
+
* app/javascript/src/containers/app/actionTypes.js,
|
27
|
+
* app/javascript/src/containers/app/constants.js,
|
28
|
+
* app/javascript/src/containers/app/appReducer.js
|
29
|
+
|
30
|
+
### Component generator
|
31
|
+
#### Created folder/files
|
32
|
+
* app/javascript/src/components/app/#{your_component_name},
|
33
|
+
* app/javascript/src/components/app/#{your_component_name}/#{your_component_name}.js,
|
34
|
+
* app/javascript/src/components/app/#{your_component_name}/#{your_component_name}.scss
|
35
|
+
|
36
|
+
### Container generator
|
37
|
+
#### Created folder/files
|
38
|
+
* app/javascript/src/containers/#{your_container_name},
|
39
|
+
* app/javascript/src/containers/#{your_container_name}/#{your_container_name}.js,
|
40
|
+
* app/javascript/src/containers/#{your_container_name}/action.js,
|
41
|
+
* app/javascript/src/containers/#{your_container_name}/actionTypes.js,
|
42
|
+
* app/javascript/src/containers/#{your_container_name}/constants.js,
|
43
|
+
* app/javascript/src/containers/#{your_container_name}/#{your_container_name}Reducer.js
|
44
|
+
- each generated container reducer will be imported into the root reducer at app/javascript/src/reducer.js and included in the combineReducer
|
6
45
|
|
7
46
|
## Installation
|
8
47
|
|
48
|
+
Create a new Rails project with webpack option
|
49
|
+
|
50
|
+
$ rails new app_name --webpack=react
|
51
|
+
|
9
52
|
Add this line to your application's Gemfile:
|
10
53
|
|
11
54
|
```ruby
|
12
|
-
gem '
|
55
|
+
gem 'redux-rails'
|
13
56
|
```
|
14
57
|
|
15
58
|
And then execute:
|
@@ -18,11 +61,104 @@ And then execute:
|
|
18
61
|
|
19
62
|
Or install it yourself as:
|
20
63
|
|
21
|
-
$ gem install
|
64
|
+
$ gem install redux-rails
|
65
|
+
|
66
|
+
Install all of the dependencies:
|
67
|
+
|
68
|
+
$ yarn install
|
69
|
+
|
70
|
+
At this point, Rails has created a javascript friendly app for you. To render the sample react component rails creates for you follow these steps.
|
71
|
+
|
72
|
+
First create a controller:
|
73
|
+
|
74
|
+
$ rails generate controller Pages index
|
75
|
+
|
76
|
+
This creates a Pages controller with an index method in it. A view template at `app/views/pages/index.html.erb`. Navigate to this file and replace the contents with:
|
77
|
+
|
78
|
+
```
|
79
|
+
<%= javascript_pack_tag 'hello_react' %>
|
80
|
+
```
|
81
|
+
|
82
|
+
To allow javascript_pack_tag to load assets from webpack-dev-server navigate to `config/environments/development.rb` and add:
|
83
|
+
|
84
|
+
```
|
85
|
+
config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080"
|
86
|
+
```
|
87
|
+
|
88
|
+
Start the Rails server in a terminal window:
|
89
|
+
|
90
|
+
$ Rails server
|
91
|
+
|
92
|
+
and in a second server window:
|
93
|
+
|
94
|
+
$ ./bin/webpack-dev-server --host 127.0.0.1
|
95
|
+
|
96
|
+
Navigate to http://localhost:3000/pages/index and you should see
|
97
|
+
```
|
98
|
+
Hello React!
|
99
|
+
```
|
22
100
|
|
23
101
|
## Usage
|
24
102
|
|
25
|
-
|
103
|
+
### Install generator
|
104
|
+
Once your rails app is setup with the webpack=react option and the redux-rails gem is installed execute:
|
105
|
+
###### *if you leave #{your_app_name} blank file names will default to 'app'*
|
106
|
+
|
107
|
+
$ rails generate redux-rails:install #{your_app_name}
|
108
|
+
|
109
|
+
This will install the following files:
|
110
|
+
```
|
111
|
+
app/javascript/src,
|
112
|
+
app/javascript/src/reducer.js, "this is for your combineReducer"
|
113
|
+
|
114
|
+
app/javascript/src/components,
|
115
|
+
app/javascript/src/components/#{your_app_name},
|
116
|
+
app/javascript/src/components/#{your_app_name}/#{your_app_name}.js,
|
117
|
+
app/javascript/src/components/#{your_app_name}/#{your_app_name}.scss
|
118
|
+
|
119
|
+
app/javascript/src/containers,
|
120
|
+
app/javascript/src/containers/#{your_app_name},
|
121
|
+
app/javascript/src/containers/#{your_app_name}/#{your_app_name}.js,
|
122
|
+
app/javascript/src/containers/#{your_app_name}/action.js,
|
123
|
+
app/javascript/src/containers/#{your_app_name}/actionTypes.js,
|
124
|
+
app/javascript/src/containers/#{your_app_name}/constants.js,
|
125
|
+
app/javascript/src/containers/#{your_app_name}/#{your_app_name}Reducer.js
|
126
|
+
```
|
127
|
+
|
128
|
+
Once the install generator is finished:
|
129
|
+
- add the following pack_tags to the file you want the react component to be rendered in
|
130
|
+
```
|
131
|
+
<%= javascript_pack_tag '#{your_app_name}' %>
|
132
|
+
<%= stylesheet_pack_tag '#{your_app_name}' %>
|
133
|
+
```
|
134
|
+
Restart your servers or open two new ones with the commands above and navigate to the page in your browser and you should see:
|
135
|
+
```
|
136
|
+
Welcome you're now using React and Redux with Rails!
|
137
|
+
```
|
138
|
+
### Component generator
|
139
|
+
To create a new component run:
|
140
|
+
|
141
|
+
$ rails generate component #{your_component_name}
|
142
|
+
|
143
|
+
This will generate a new folder inside of your components folder with the following files:
|
144
|
+
- `app/javascript/src/components/#{your_component_name}`
|
145
|
+
- `app/javascript/src/components/#{your_component_name}/#{your_component_name}.js`
|
146
|
+
- `app/javascript/src/components/#{your_component_name}/#{your_component_name}.scss`
|
147
|
+
|
148
|
+
### Container generator
|
149
|
+
To create a new container run:
|
150
|
+
|
151
|
+
$ rails generate container #{your_container_name}
|
152
|
+
|
153
|
+
This will generate a new folder inside of your containers folder with the following files:
|
154
|
+
- `app/javascript/src/containers/#{your_container_name}`
|
155
|
+
- `app/javascript/src/containers/#{your_container_name}/#{your_container_name}.js`
|
156
|
+
- `app/javascript/src/containers/#{your_container_name}/action.js`
|
157
|
+
- `app/javascript/src/containers/#{your_container_name}/actionTypes.js`
|
158
|
+
- `app/javascript/src/containers/#{your_container_name}/constants.js`
|
159
|
+
- `app/javascript/src/containers/#{your_container_name}/#{your_container_name}Reducer.js`
|
160
|
+
|
161
|
+
|
26
162
|
|
27
163
|
## Development
|
28
164
|
|
@@ -32,7 +168,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
|
|
32
168
|
|
33
169
|
## Contributing
|
34
170
|
|
35
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/
|
171
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/Luke-Popwell/redux_rails.
|
36
172
|
|
37
173
|
## License
|
38
174
|
|
@@ -0,0 +1,28 @@
|
|
1
|
+
class ComponentGenerator < Rails::Generators::NamedBase
|
2
|
+
source_root File.expand_path('../templates', __FILE__)
|
3
|
+
argument :name, :type => :string, :default => "app"
|
4
|
+
|
5
|
+
def create_component_directory
|
6
|
+
empty_directory("app/javascript/src/components/#{name}")
|
7
|
+
end
|
8
|
+
|
9
|
+
def create_component_index
|
10
|
+
create_file "app/javascript/src/components/#{name}/#{name}.js",
|
11
|
+
"import React from 'react';
|
12
|
+
import './#{name}.scss';
|
13
|
+
|
14
|
+
const #{name} = () => (
|
15
|
+
<div className='#{name}'>
|
16
|
+
<h1>#{name} component!</h1>
|
17
|
+
<p>find me in app/javascript/src/components/#{name}/#{name}.js</p>
|
18
|
+
</div>
|
19
|
+
)
|
20
|
+
|
21
|
+
export default #{name};"
|
22
|
+
create_file "app/javascript/src/components/#{name}/#{name}.scss", "
|
23
|
+
.#{name} {
|
24
|
+
|
25
|
+
}"
|
26
|
+
end
|
27
|
+
|
28
|
+
end
|
@@ -0,0 +1,41 @@
|
|
1
|
+
class ContainerGenerator < Rails::Generators::NamedBase
|
2
|
+
source_root File.expand_path('../templates', __FILE__)
|
3
|
+
argument :name, :type => :string, :default => "app"
|
4
|
+
|
5
|
+
|
6
|
+
def create_directory
|
7
|
+
empty_directory("app/javascript/src/containers/#{name}")
|
8
|
+
end
|
9
|
+
|
10
|
+
def create_container_files
|
11
|
+
create_file "app/javascript/src/containers/#{name}/#{name}.js",
|
12
|
+
"import * as actions from './actions';
|
13
|
+
import * as constants from './constants';
|
14
|
+
import #{name}Reducer from './reducer';
|
15
|
+
|
16
|
+
export default { actions, constants, #{name}Reducer };"
|
17
|
+
create_file "app/javascript/src/containers/#{name}/action.js",
|
18
|
+
"// import {} from './constants';
|
19
|
+
//import * as t from './actionTypes';
|
20
|
+
|
21
|
+
//export const someAction = (text) => ({
|
22
|
+
// type: t.SOME_ACTION,
|
23
|
+
// payload: { text }
|
24
|
+
//});"
|
25
|
+
create_file "app/javascript/src/containers/#{name}/actionTypes.js",
|
26
|
+
"//export const SOME_ACTION = '#{name}/SOME_ACTION';"
|
27
|
+
create_file "app/javascript/src/containers/#{name}/constants.js",
|
28
|
+
"// export const SOME_CONST = 'SOME_CONST';"
|
29
|
+
|
30
|
+
create_file "app/javascript/src/containers/#{name}/#{name}Reducer.js",
|
31
|
+
"const #{name}Reducer = (state = {}, action) => {
|
32
|
+
switch (action.type) {
|
33
|
+
default:
|
34
|
+
return state;
|
35
|
+
}
|
36
|
+
};
|
37
|
+
|
38
|
+
export default #{name}Reducer;"
|
39
|
+
end
|
40
|
+
|
41
|
+
end
|
@@ -0,0 +1,127 @@
|
|
1
|
+
module ReduxRails
|
2
|
+
class InstallGenerator < Rails::Generators::Base
|
3
|
+
source_root File.expand_path('./templates', __FILE__)
|
4
|
+
argument :name, :type => :string, :default => "app"
|
5
|
+
|
6
|
+
def create_src_directory
|
7
|
+
empty_directory("app/javascript/src")
|
8
|
+
end
|
9
|
+
|
10
|
+
def create_reducer_base_files
|
11
|
+
create_file "app/javascript/src/reducer.js", "
|
12
|
+
import { combineReducers } from 'redux'
|
13
|
+
import #{name}Reducer from './containers/#{name}/#{name}Reducer.js'
|
14
|
+
|
15
|
+
const rootReducer = combineReducers({
|
16
|
+
#{name}Reducer
|
17
|
+
})
|
18
|
+
|
19
|
+
export default rootReducer"
|
20
|
+
end
|
21
|
+
|
22
|
+
def create_component_base_files
|
23
|
+
empty_directory("app/javascript/src/components")
|
24
|
+
empty_directory("app/javascript/src/components/#{name}")
|
25
|
+
create_file "app/javascript/src/components/#{name}/#{name}.js", "
|
26
|
+
import React from 'react';
|
27
|
+
import './#{name}.scss';
|
28
|
+
|
29
|
+
const #{name} = () => (
|
30
|
+
<div className='#{name}'>
|
31
|
+
<h1>#{name} component!</h1>
|
32
|
+
<p>find me in app/javascript/src/components/#{name}/#{name}.js</p>
|
33
|
+
</div>
|
34
|
+
)
|
35
|
+
|
36
|
+
export default #{name};"
|
37
|
+
create_file "app/javascript/src/components/#{name}/#{name}.scss", "
|
38
|
+
.#{name} {
|
39
|
+
|
40
|
+
}"
|
41
|
+
end
|
42
|
+
|
43
|
+
def create_container_base_files
|
44
|
+
empty_directory("app/javascript/src/containers")
|
45
|
+
empty_directory("app/javascript/src/containers/#{name}")
|
46
|
+
create_file "app/javascript/src/containers/#{name}/#{name}.js", "
|
47
|
+
import * as actions from './actions';
|
48
|
+
import * as constants from './constants';
|
49
|
+
import #{name}Reducer from './reducer';
|
50
|
+
|
51
|
+
export default { actions, constants, #{name}Reducer };"
|
52
|
+
create_file "app/javascript/src/containers/#{name}/action.js", "
|
53
|
+
// import {} from './constants';
|
54
|
+
//import * as t from './actionTypes';
|
55
|
+
|
56
|
+
//export const someAction = (text) => ({
|
57
|
+
// type: t.SOME_ACTION,
|
58
|
+
// payload: { text }
|
59
|
+
//});"
|
60
|
+
create_file "app/javascript/src/containers/#{name}/actionTypes.js", "
|
61
|
+
//export const SOME_ACTION = '#{name}/SOME_ACTION';"
|
62
|
+
|
63
|
+
create_file "app/javascript/src/containers/#{name}/constants.js", "
|
64
|
+
// export const SOME_CONST = 'SOME_CONST';"
|
65
|
+
|
66
|
+
create_file "app/javascript/src/containers/#{name}/#{name}Reducer.js", "
|
67
|
+
const #{name}Reducer = (state = {}, action) => {
|
68
|
+
switch (action.type) {
|
69
|
+
default:
|
70
|
+
return state;
|
71
|
+
}
|
72
|
+
};
|
73
|
+
|
74
|
+
export default #{name}Reducer;"
|
75
|
+
end
|
76
|
+
|
77
|
+
def create_pack
|
78
|
+
create_file "app/javascript/packs/#{name}.jsx", "
|
79
|
+
import React from 'react'
|
80
|
+
import { render } from 'react-dom'
|
81
|
+
import { Provider } from 'react-redux'
|
82
|
+
import { createStore, combineReducers, applyMiddleware } from 'redux'
|
83
|
+
|
84
|
+
//this allows you to use the redux devtool in chrome
|
85
|
+
import { devToolsEnhancer } from 'redux-devtools-extension'
|
86
|
+
|
87
|
+
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
|
88
|
+
|
89
|
+
import #{name} from './src/components/#{name}/#{name}'
|
90
|
+
|
91
|
+
import rootReducer from '../src/reducer'
|
92
|
+
|
93
|
+
//this is for devToolsEnhancer otherwise would be 'let store = createStore(todoApp)'
|
94
|
+
let store = createStore(todoApp, /* preloadedState, */ devToolsEnhancer(
|
95
|
+
// Specify name here, actionsBlacklist, actionsCreators and other options if needed
|
96
|
+
));
|
97
|
+
console.log(store.getState())
|
98
|
+
|
99
|
+
// Note that subscribe() returns a function for unregistering the listener
|
100
|
+
let unsubscribe = store.subscribe(() =>
|
101
|
+
console.log(store.getState())
|
102
|
+
)
|
103
|
+
|
104
|
+
// Stop listening to state updates
|
105
|
+
unsubscribe()
|
106
|
+
|
107
|
+
document.addEventListener('DOMContentLoaded', () => {
|
108
|
+
render(
|
109
|
+
<Provider store={store}>
|
110
|
+
<Router>
|
111
|
+
<div>
|
112
|
+
<Route exact path="/" component={#{name}} />
|
113
|
+
</div>
|
114
|
+
</Router>
|
115
|
+
</Provider>,
|
116
|
+
document.body.appendChild(document.createElement('div')),
|
117
|
+
)
|
118
|
+
})"
|
119
|
+
end
|
120
|
+
|
121
|
+
def insert_into_manifest
|
122
|
+
inject_into_file "public/packs/manifest.json", "'#{name}.js': 'http://0.0.0.0:8080/packs/#{name}.js',\n", :after => "{\n"
|
123
|
+
inject_into_file "public/packs/manifest.json", "'#{name}.css': 'http://0.0.0.0:8080/packs/#{name}.css',\n", :after => "'#{name}.js': 'http://0.0.0.0:8080/packs/#{name}.js',\n"
|
124
|
+
end
|
125
|
+
|
126
|
+
end
|
127
|
+
end
|
data/lib/redux_rails/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: redux_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Luke Popwell
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-07-
|
11
|
+
date: 2017-07-16 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -70,6 +70,9 @@ files:
|
|
70
70
|
- Rakefile
|
71
71
|
- bin/console
|
72
72
|
- bin/setup
|
73
|
+
- lib/generators/component/component_generator.rb
|
74
|
+
- lib/generators/container/container_generator.rb
|
75
|
+
- lib/generators/redux_rails/install_generator.rb
|
73
76
|
- lib/redux_rails.rb
|
74
77
|
- lib/redux_rails/version.rb
|
75
78
|
- redux_rails.gemspec
|