├── .babelrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── README.md
├── examples
├── README.md
├── counter-vanilla
│ └── index.html
├── retweet
│ ├── .babelrc
│ ├── README.md
│ ├── app
│ │ ├── routes.js
│ │ ├── server.js
│ │ ├── socket.js
│ │ └── state.js
│ ├── client
│ │ ├── actions
│ │ │ ├── index.js
│ │ │ ├── messages.js
│ │ │ ├── socket.js
│ │ │ ├── tweets.js
│ │ │ └── user.js
│ │ ├── components
│ │ │ ├── app.js
│ │ │ ├── header.js
│ │ │ ├── message-popup.js
│ │ │ ├── message.js
│ │ │ ├── messages-button.js
│ │ │ ├── tweet.js
│ │ │ └── tweets-list.js
│ │ ├── css
│ │ │ └── main.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── state
│ │ │ ├── index.js
│ │ │ ├── messages.js
│ │ │ ├── state.js
│ │ │ ├── tweets.js
│ │ │ └── user.js
│ ├── package.json
│ └── webpack.config.js
├── snabbdom-counter
│ ├── .babelrc
│ ├── README.md
│ ├── client
│ │ ├── index.html
│ │ └── index.js
│ ├── package.json
│ └── webpack.config.js
├── snabbdom-observable-router
│ ├── .babelrc
│ ├── README.md
│ ├── client
│ │ ├── actions
│ │ │ └── index.js
│ │ ├── containers
│ │ │ ├── app-container.js
│ │ │ ├── home-container.js
│ │ │ ├── item-container.js
│ │ │ └── items-container.js
│ │ ├── index.html
│ │ ├── index.js
│ │ ├── state
│ │ │ └── index.js
│ │ └── utils.js
│ ├── package.json
│ ├── server.js
│ └── webpack.config.js
└── todomvc
│ ├── .babelrc
│ ├── README.md
│ ├── package.json
│ ├── src
│ ├── actions
│ │ └── index.js
│ ├── components
│ │ ├── app.js
│ │ ├── footer.js
│ │ ├── header.js
│ │ ├── main-section.js
│ │ ├── todo-item.js
│ │ └── todo-text-input.js
│ ├── constants
│ │ └── index.js
│ ├── index.html
│ ├── index.js
│ └── state
│ │ ├── display.js
│ │ ├── editor.js
│ │ ├── index.js
│ │ ├── state.js
│ │ └── todos.js
│ └── webpack.config.js
├── lib
├── action
│ └── index.js
├── errors.js
├── index.js
├── state
│ ├── hooks.js
│ ├── index.js
│ ├── node.js
│ └── tree.js
└── utils.js
├── package.json
├── test
├── action
│ └── index.js
└── state
│ ├── hooks.js
│ ├── node.js
│ └── tree.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | browser
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | examples
2 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "6.1"
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | [Travis CI Status](https://travis-ci.org/shiftyp/redurx): 
4 |
5 | ## Basic Snippet
6 | Always good to start out with a basic snippet:
7 | ```JavaScript
8 | import { createState, createAction } from 'redurx';
9 |
10 | const increment = createAction();
11 | const decrement = createAction();
12 | const state = createState({
13 | counter: 0
14 | });
15 | const counter = state('counter');
16 |
17 | counter
18 | .asObservable()
19 | .subscribe(num => console.log(num));
20 |
21 | state.connect();
22 | // 0
23 |
24 | counter
25 | .reduce(increment, num => num + 1)
26 | .reduce(decrement, num => num - 1);
27 |
28 | increment();
29 | // 1
30 | increment();
31 | // 2
32 | decrement();
33 | // 1
34 | decrement();
35 | // 0
36 | ```
37 |
38 | So what's going on here. We have some state, the `counter`, and we want to observe changes to this state from anywhere in our application. We want to change this state when events occur in our application, so we have action functions that we can call when those events happen. The way the state changes in response to those actions is defined functionally using reducers. In essence this is the [Redux](https://github.com/reactjs/redux) pattern, with two major differences.
39 |
40 | First, the state tree is implemented with [RxJS](https://github.com/Reactive-Extensions/RxJS) Observables, with every value, or node, in the tree having its own observable you can subscribe to. Second, actions creators are functions that have their own associated observable. We can hook the state observables and one or more additional observables together using `reduce`, which accepts a reducer function that works like a Redux reducer.
41 |
42 | Using a tree of observables along with action observables has many implicit features. Async operations and promises without middleware; computing additional state functionally from other parts of state; caching or collecting previous values within observables; pausing, delays, retrys, intervals, throttling, sampling, and other observable features; are all possible with ReduRx.
43 |
44 | So ReduRx is like Redux, only you can do more with less code. Redux is based on three basic principles, and ReduRx maintains these principles to allow you to write more predictable code. Given that, it makes sense to introduce the features of ReduRx using these principles as a guide:
45 |
46 | ### #1 Single Source of Truth
47 |
48 | With Redux there is single store object that stores state, and you describe the initial state of that store when it loads. You can do this either all at once when you create the store, or in parts as the reducer functions that manage the store are called.
49 |
50 | ReduRx also maintains a single state tree; only each node in the tree has an observable associated with it. You can create the state tree all at once by calling `createState` with a value that you'd like to use as the initial state. When you're ready to use the state, you call `connect` on the state;
51 |
52 | ```javascript
53 | import { createState } from 'redurx';
54 |
55 | const state = createState({
56 | todos: {
57 | list: [],
58 | search: {
59 | filter: '',
60 | query: '',
61 | dirty: true
62 | },
63 | error: null
64 | },
65 | todonts: {
66 | list: [],
67 | search: {
68 | filter: '',
69 | query: '',
70 | dirty: true
71 | },
72 | error: null
73 | },
74 | });
75 |
76 | state.connect();
77 | ```
78 | Each node is a function that can be used to access any child node by passing a dot delimited path to that node. So to get the node for the todo list from the state you could do:
79 | ```javascript
80 | state('todos.list');
81 | // or
82 | state('todos')('list');
83 | ```
84 | Each node has an observable associated with it that you can subscribe to. To get an observable call `asObservable` on the node.
85 | ```javascript
86 | state('todos.list')
87 | .asObservable()
88 | .subscribe(list => {
89 | console.log(`The list: ${JSON.stringify(list)}`);
90 | });
91 | // The List: []
92 | ```
93 | You don't have to define your initial state at the outset however. You can figure out what the state for any part of your tree is at any point in the future. You can set the initial state by calling `setInitialState` on the node, or by passing the initial state as a second argument when accessing the node:
94 | ```javascript
95 | import { createState } from 'redurx';
96 |
97 | const state = createState();
98 |
99 | state.setInitialState({
100 | todos: {
101 | list: [],
102 | search: {
103 | filter: '',
104 | query: '',
105 | dirty: true
106 | },
107 | error: null
108 | }
109 | });
110 |
111 | setTimeout(() => {
112 | state('todonts').setInitialState({
113 | search: {
114 | filter: '',
115 | query: '',
116 | dirty: true
117 | },
118 | error: null
119 | });
120 |
121 | state('todonts.list', []);
122 |
123 | state.connect();
124 | }, 1000);
125 | ```
126 | You can subscribe to changes on a node at any point though, even before the node has an initial value. If you've already connected the parent state before defining a new node, make sure to connect the child node after referencing it.
127 | ```javascript
128 | import { createState } from 'redurx';
129 |
130 | const state = createState();
131 |
132 | state('todonts.list')
133 | .asObservable()
134 | .subscribe(list => {
135 | console.log(`The list: ${JSON.stringify(list)}`);
136 | });
137 |
138 | state.connect();
139 |
140 | setTimeout(() => {
141 | state('todonts').setInitialState({
142 | list: [],
143 | search: {
144 | filter: '',
145 | query: '',
146 | dirty: true
147 | },
148 | error: null
149 | }).connect();
150 | }, 1000);
151 |
152 | // ...time passes
153 | // The List: []
154 | ```
155 | ### #2: State is Read only
156 |
157 | Observables give you values, not the other way around.
158 |
159 | ### #3: Changes are made with Pure Functions
160 |
161 | So if we're subscribing to changes in state, then state must be changeable. This is where ReduRx is like Redux, in that you can write reducer functions that take the previous value for a node, and some data, and return a new value for the node. You provide this additional data as a set of observables, and you provide your reducer functions through the node's `reduce` api:
162 | ```javascript
163 | import Rx from 'rx';
164 | // We defined and connected state somewhere else
165 | import state from '../state';
166 |
167 | const itemAction = new Rx.Subject();
168 | const errorAction = new Rx.Subject();
169 |
170 | const todoState = state('todos');
171 | const listState = todoState('list');
172 | const errorState = todoState('error');
173 |
174 |
175 | const logStateWithType = (someState, type) => {
176 | someState
177 | .asObservable()
178 | .subscribe(list => {
179 | console.log(`The ${type}: ${JSON.stringify(list)}`);
180 | });
181 | };
182 |
183 | logStateWithType(listState, 'List')
184 | // The List: []
185 | logStateWithType(errorState, 'Error')
186 | // The Error: null
187 |
188 | todoState
189 | .reduce(itemAction, (state, item) => {
190 | return Object.assign({}, state, {
191 | list: [...state.list, item]
192 | });
193 | })
194 | .reduce(errorAction, (state, err) => {
195 | return Object.assign({}, state, {
196 | list: [],
197 | error: item.message
198 | });
199 | });
200 |
201 | itemAction.onNext(42);
202 | // The List: [42]
203 | itemAction.onNext(50);
204 | // The List: [42, 50]
205 | errorAction.onNext(new Error('AHHHH!'));
206 | // The List: []
207 | // The Error: 'AHHHH!'
208 | ```
209 | Notice that the reducers are returning state for the parent node, but these changes are being propagated to the child nodes. The reverse is also true, in that if you hook reducers into child nodes it will update the state for the parent node. In this case, all updates to child nodes that result from an identical hooked observable will only cause a single update on all parent nodes.
210 |
211 | To make these "action creator" observables easier to manage, ReduRx also includes a `createAction` function, that creates an update function with an associated observable. The create action function takes a callback that allows you to configure the action's observable, allowing you to transform the arguments to the action. Here's a somewhat complete example of what the state and business logic for a todo list app might look like:
212 | ```javascript
213 | import axios from 'axios';
214 | import { createAction } from 'redurx';
215 | // We defined and connected state somewhere else
216 | import state from '../state';
217 |
218 | const todoState = state('todos').setInitialState({
219 | list: [],
220 | search: {
221 | filter: '',
222 | query: '',
223 | dirty: true
224 | },
225 | error: null
226 | });
227 |
228 | export const setTodoFilter = createAction((filters) => {
229 | return filters.distinctUntilChanged();
230 | });
231 |
232 | export const setTodoQuery = createAction((queries) => {
233 | return queries.distinctUntilChanged();
234 | });
235 |
236 | export const getTodos = createAction((submits) => {
237 | return submits
238 | .withLatestFrom(
239 | todoState('search.dirty').asObservable(),
240 | (_, dirty) => dirty
241 | )
242 | .filter(dirty => dirty)
243 | .withLatestFrom(
244 | todoState('search.filter').asObservable(),
245 | todoState('search.query').asObservable(),
246 | (_, filter, query) => ({ filter, query })
247 | )
248 | .flatMapLatest(params => axios.get('/api/todos', params)
249 | .then(result => result.data)
250 | .catch(err => {
251 | getTodosError(err);
252 | return [];
253 | }));
254 | });
255 |
256 | export const getTodosError = createAction();
257 |
258 | todoState('search.filter')
259 | .reduce(setTodoFilter, (state, filter) => filter);
260 |
261 | todoState('search.query')
262 | .reduce(setTodoQuery, (state, query) => query);
263 |
264 | todoState('search.dirty')
265 | .reduce([setTodoFilter, setTodoQuery], () => true)
266 | .reduce(getTodos, () => false)
267 |
268 | todoState('list')
269 | .reduce(getTodos, (state, list) => list);
270 |
271 | todoState('error')
272 | .reduce(getTodos, () => null)
273 | .reduce(getTodosError, (err) => err);
274 | ```
275 | Because you can reduce values from any observable, you can even use other parts of the state to create computed properties. It's possible to create an infinite loop this way, so make sure that you don't hook state into its own children.
276 | ```javascript
277 | import { createState } from 'redurx';
278 |
279 | const state = createState({
280 | todos: {
281 | list: [{
282 | text: 'Some Todo',
283 | completed: false
284 | },{
285 | text: 'Some Other Todo',
286 | completed: true
287 | }],
288 | filteredList: [],
289 | filter: true
290 | }
291 | });
292 |
293 | state('todos.filteredList').reduce(
294 | [
295 | state('todos.list').asObservable(),
296 | state('todos.filter').asObservable()
297 | ],
298 | (filtered, [list, filter]) => (
299 | list.filter(todo => todo.completed === filter)
300 | )
301 | );
302 |
303 | // Call after you've hooked the state into itself
304 | state.connect();
305 |
306 | state('todos')
307 | .asObservable()
308 | .subscribe(todos => {
309 | console.log(`The Filtered List: ${JSON.stringify(todos.filteredList)}`)
310 | });
311 | // The Filtered List: [{text:'Some Other Todo',completed:true}]
312 | ```
313 |
314 | ## One Way Data Flow
315 |
316 | ReduRx maintains one way data flow through your application just like any Flux framework. Data is aggregated from various sources using observables, and given some input you'll get predictable output. [FRP](https://en.wikipedia.org/wiki/Functional_reactive_programming) FTW! Here's how it works with ReduRx where the state is an object, with two values `bar` and `foo`. A single action creator is hooked into the base object, and we're subscribing to changes on the base object as well. The flow goes from green to blue to red:
317 |
318 | 
319 |
320 |
321 | ## How would I use this?
322 | ReduRx, like Redux, can be used anywhere you'd like some functional state management. ReduRx is probably useful under a wider set of circumstances because you can subscribe to state changes anywhere in the tree, not just at the root. The obvious use for it is as a state container for React; and using something like [recompose](https://github.com/acdlite/recompose)'s [observable utilities](https://github.com/acdlite/recompose/blob/master/docs/API.md#observable-utilities) this turns out to be pretty simple:
323 | ```javascript
324 | // See setting the observable config in the recompose docs
325 | // You'll want to set it for RxJS 4
326 | import { mapPropsStream } from 'recompose';
327 |
328 | import state from '../state';
329 | import {
330 | setTodoFilter,
331 | setTodoQuery,
332 | getTodos
333 | } from '../actions/todos';
334 | import TodoSearchBar from './todo-search-bar';
335 |
336 | const enhance = mapPropsStream(propsStream => {
337 | return propsStream
338 | .combineLatest(
339 | state('todos').asObservable(),
340 | (props, { list, search }) => ({
341 | ...props,
342 | list,
343 | search
344 | })
345 | );
346 | })
347 |
348 | const TodoList = enhance(({ list, search }) => {
349 | const searchActions = { setTodoQuery, setTodoFilter, getTodos };
350 | return (
351 |
352 |
353 |
354 | {list.map(todo => {todo} )}
355 |
356 |
ReduRx basic example
5 |
6 |
7 |
8 |
9 |
10 | Clicked: +
12 | -
13 | Increment if odd
14 | Increment async
15 |
16 |
9 |
15 |
17 | )
18 | };
19 |
20 | App.propTypes = {
21 | tweets: PropTypes.object.isRequired,
22 | messages: PropTypes.object.isRequired,
23 | retrieveMessages: PropTypes.func.isRequired,
24 | hideMessages: PropTypes.func.isRequired
25 | };
26 |
27 | export default App;
28 |
--------------------------------------------------------------------------------
/examples/retweet/client/components/header.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | import MessagesButton from './messages-button'
4 |
5 | const Header = ({ tweets, retrieveMessages, hideMessages, messages }) => {
6 | return (
7 |
23 | );
24 | }
25 |
26 | Header.propTypes = {
27 | tweets: PropTypes.object.isRequired,
28 | messages: PropTypes.object.isRequired,
29 | retrieveMessages: PropTypes.func.isRequired,
30 | hideMessages: PropTypes.func.isRequired
31 | };
32 |
33 | export default Header;
34 |
--------------------------------------------------------------------------------
/examples/retweet/client/components/message-popup.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | import Message from './message';
4 |
5 | const hideHandler = hideMessages => e => {
6 | e.stopPropagation();
7 | hideMessages();
8 | };
9 |
10 | const MessagePopup = ({ list, shown, totalUnread, retrieveMessages, hideMessages }) => {
11 | if (shown) {
12 | const showMore = totalUnread > 0 ? (
13 | Click To Show Unread Messages
14 | ) : null;
15 | return (
16 |
20 |
21 | {showMore}
22 |
26 |
29 | );
30 | } else {
31 | return null;
32 | }
33 | };
34 |
35 | MessagePopup.propTypes = {
36 | list: PropTypes.array.isRequired,
37 | shown: PropTypes.bool.isRequired,
38 | totalUnread: PropTypes.number.isRequired,
39 | retrieveMessages: PropTypes.func.isRequired,
40 | hideMessages: PropTypes.func.isRequired
41 | };
42 |
43 | export default MessagePopup;
44 |
--------------------------------------------------------------------------------
/examples/retweet/client/components/message.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | const Message = ({ message }) => {
4 | return (
5 |
6 | {message.name}
8 | {message.text}
9 |
10 | )
11 | };
12 |
13 | Message.propTypes = {
14 | message: PropTypes.object.isRequired
15 | };
16 |
17 | export default Message;
18 |
--------------------------------------------------------------------------------
/examples/retweet/client/components/messages-button.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | import MessagePopup from './message-popup';
4 |
5 | const MessagesButton = ({ retrieveMessages, hideMessages, messages }) => {
6 | return (
7 |
11 |
18 | )
19 | };
20 |
21 | MessagesButton.propTypes = {
22 | retrieveMessages: PropTypes.func.isRequired,
23 | hideMessages: PropTypes.func.isRequired,
24 | messages: PropTypes.object.isRequired
25 | };
26 |
27 | export default MessagesButton;
28 |
--------------------------------------------------------------------------------
/examples/retweet/client/components/tweet.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | const Tweet = ({ avatar, name, text, id }) => {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
{name}
11 |
{text}
12 |
13 |
8 | {tweets.list.map((tweet, i) =>
10 | )
11 | };
12 |
13 | TweetsList.propTypes = {
14 | tweets: PropTypes.object.isRequired
15 | };
16 |
17 | export default TweetsList;
18 |
--------------------------------------------------------------------------------
/examples/retweet/client/css/main.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | max-width: 1000px;
4 | margin: 0 auto;
5 | }
6 |
7 | .blue {
8 | color: #0078e7;
9 | display: inline-block;
10 | padding: 5px;
11 | border: 5px solid #222;
12 | border-right: none;
13 | }
14 |
15 | .grey {
16 | background: #222;
17 | color: #fff;
18 | display: inline-block;
19 | padding: 10px;
20 | border-left: 5px solid #0078e7;
21 | }
22 |
23 | header {
24 | padding-bottom: 20px;
25 | padding-top: 20px;
26 | border-top: 5px solid #777;
27 | margin-bottom: 20px;
28 | }
29 |
30 | header h1 {
31 | /*font-size: 4em;*/
32 | margin: 0;
33 | padding: 0;
34 | }
35 |
36 | .total-tweets {
37 | float: right;
38 | margin: 15px 10px 0 0;
39 | }
40 |
41 | .messages-button {
42 | margin-top: 11px;
43 | position: relative;
44 | float: right;
45 | }
46 |
47 | .show-more {
48 | text-align: center;
49 | }
50 |
51 | .show-more .fa-remove {
52 | float: right;
53 | }
54 |
55 | .message-popup {
56 | list-style: none;
57 | text-align: left;
58 | position: absolute;
59 | bottom: -20px;;
60 | left: 50%;
61 | transform: translateY(100%) translateX(-50%);
62 | background: #222;
63 | color: #fff;
64 | width: 400px;
65 | margin: 0;
66 | padding: 10px;
67 | border-radius: 10px;
68 | }
69 |
70 | .message-popup:before {
71 | display: block;
72 | content: ' ';
73 | position: absolute;
74 | top: -20px;
75 | left: 50%;
76 | transform: translateX(-15px);
77 | width: 0;
78 | height: 0;
79 | border-style: solid;
80 | border-width: 0 15px 20px 15px;
81 | border-color: transparent transparent #222 transparent;
82 | }
83 |
84 | .message {
85 | height: 30px;
86 | line-height: 20px;
87 | text-overflow: ellipsis;
88 | overflow: hidden;
89 | }
90 |
91 | .message-avatar {
92 | height: 30px;
93 | margin-right: 10px;
94 | }
95 |
--------------------------------------------------------------------------------
/examples/retweet/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ReTweet
11 |
12 |
13 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/examples/retweet/client/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import setObservableConfig from 'recompose/setObservableConfig';
4 | import mapPropsStream from 'recompose/mapPropsStream';
5 | import rxjs4config from 'recompose/rxjs4ObservableConfig';
6 |
7 | setObservableConfig(rxjs4config);
8 |
9 | import state from './state';
10 | import {
11 | initializeSocket,
12 | retrieveMessages,
13 | hideMessages
14 | } from './actions';
15 | import App from './components/app';
16 | import './css/main.css';
17 |
18 | const enhance = mapPropsStream(propsStream => {
19 | return propsStream
20 | .combineLatest(
21 | state.asObservable(),
22 | (props, { tweets, messages }) => Object.assign({}, props, {
23 | tweets,
24 | messages
25 | })
26 | );
27 | });
28 |
29 | const EnhancedApp = enhance(App);
30 |
31 | initializeSocket();
32 |
33 | render(
34 | Snabbdom ReduRx Counter
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/snabbdom-counter/client/index.js:
--------------------------------------------------------------------------------
1 | import snabbdom from 'snabbdom';
2 | import eventlisteners from 'snabbdom/modules/eventlisteners';
3 | import { createState, createAction } from 'redurx';
4 | import h from 'snabbdom/h';
5 |
6 | const patch = snabbdom.init([eventlisteners]);
7 |
8 | const state = createstate({ counter: 0 });
9 |
10 | const increment = createAction();
11 | const decrement = createAction();
12 |
13 | state('counter')
14 | .reduce(increment, num => num + 1)
15 | .reduce(decrement, num => num - 1);
16 |
17 | const render = (counter) => (
18 |
19 |
{counter}
20 |
Increment
21 |
Decrement
22 |
(github.com/shiftyp)",
14 | "license": "ISC",
15 | "dependencies": {
16 | "babel-core": "^6.10.4",
17 | "babel-loader": "^6.2.4",
18 | "babel-plugin-syntax-jsx": "6.8.0",
19 | "babel-preset-es2015": "^6.9.0",
20 | "babel-snabbdom-jsx": "0.3.0",
21 | "raw-loader": "^0.5.1",
22 | "redurx": "^0.4.0",
23 | "rx": "4.1.0",
24 | "snabbdom": "0.5.0",
25 | "snabbdom-jsx": "0.3.0",
26 | "style-loader": "^0.13.1",
27 | "webpack": "^1.13.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/examples/snabbdom-counter/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 |
3 | module.exports = {
4 | devtool: 'source-map',
5 | entry: [
6 | './client/index.js'
7 | ],
8 | output: {
9 | path: './dist/js',
10 | filename: 'bundle.js',
11 | publicPath: '/js/'
12 | },
13 | plugins: [
14 | new webpack.optimize.OccurrenceOrderPlugin()
15 | ],
16 | module: {
17 | loaders: [
18 | {
19 | test: /\.js$/,
20 | loaders: [ 'babel' ],
21 | exclude: /node_modules/
22 | },
23 | {
24 | test: /\.css?$/,
25 | loaders: [ 'style', 'raw' ]
26 | },
27 | {
28 | test: /\.json$/,
29 | loader: 'json'
30 | }
31 | ]
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["syntax-jsx", "babel-snabbdom-jsx"],
3 | "presets": ["es2015"]
4 | }
5 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/README.md:
--------------------------------------------------------------------------------
1 | To build and run server:
2 | ```
3 | npm install
4 | npm run build
5 | node start
6 | ```
7 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/client/actions/index.js:
--------------------------------------------------------------------------------
1 | import { createAction } from 'redurx';
2 |
3 | export const selectItem = createAction();
4 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/client/containers/app-container.js:
--------------------------------------------------------------------------------
1 | import h from 'snabbdom/h';
2 |
3 | import { createLinkHandler } from '../utils';
4 |
5 | const AppContainer = ({ history }, children) => {
6 | return (
7 |
8 |
20 |
21 | {children}
22 |
23 |
6 |
This is the homepage!
7 |
8 | )
9 | };
10 |
11 | export default HomeContainer;
12 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/client/containers/item-container.js:
--------------------------------------------------------------------------------
1 | import h from 'snabbdom/h';
2 |
3 | const ItemContainer = ({ item }) => {
4 | return (
5 |
6 |
This is the item page! The ID is {item.id}
7 |
{item.text}
8 |
8 |
This is the items page!
9 |
10 | {list.map(({ id, text }) => (
11 |
12 |
14 | {text}
15 |
16 |
17 | ))}
18 |
19 |
Snabbdom ReduRx Counter
8 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/client/index.js:
--------------------------------------------------------------------------------
1 | import Rx from 'rx';
2 | import snabbdom from 'snabbdom';
3 | import eventlisteners from 'snabbdom/modules/eventlisteners';
4 | import klass from 'snabbdom/modules/class';
5 | import props from 'snabbdom/modules/props';
6 | import attrs from 'snabbdom/modules/attributes';
7 | import h from 'snabbdom/h';
8 | import { createComponentStream } from 'snabbdom-rx-utils';
9 | import createRouter from 'observable-router';
10 |
11 | import state from './state';
12 | import { selectItem } from './actions';
13 |
14 | import AppContainer from './containers/app-container';
15 | import HomeContainer from './containers/home-container';
16 | import ItemsContainer from './containers/items-container';
17 | import ItemContainer from './containers/item-container';
18 |
19 | const patch = snabbdom.init([eventlisteners, klass, props, attrs]);
20 |
21 | const AppStream = createComponentStream(null, AppContainer);
22 | const HomeStream = createComponentStream(null, HomeContainer);
23 | const ItemsStream = createComponentStream(
24 | state.compose({ list: 'list' }),
25 | ItemsContainer
26 | );
27 | const ItemStream = createComponentStream(
28 | state.compose({ item: 'selected' }),
29 | ItemContainer
30 | );
31 |
32 | const router = createRouter();
33 |
34 | const vdomObservable = router
35 | .route('/', (route, history, children) => (
36 | AppStream({ history }, children)
37 | ), sub => sub
38 | .route('/', (route) => HomeStream())
39 | .route('/items', {}, sub => sub
40 | .route('/', (route, history) => ItemsStream({ history }))
41 | .route('/:id', {
42 | stream: (route) => ItemStream(),
43 | onNext: (route) => selectItem(route.params.id)
44 | })
45 | )
46 | )
47 | .asObservable()
48 | .scan(patch, document.getElementById('root'));
49 |
50 | vdomObservable.subscribeOnError(err => {
51 | console.log('Rendering Error:', err.stack);
52 | });
53 |
54 | router.start();
55 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/client/state/index.js:
--------------------------------------------------------------------------------
1 | import { createState } from 'redurx';
2 |
3 | import { selectItem } from '../actions';
4 |
5 | const state = createState();
6 |
7 | state('list', [{
8 | id: "1",
9 | text: 'This is item 1'
10 | },{
11 | id: "2",
12 | text: 'This is item 2'
13 | }]);
14 |
15 | state('selected', null)
16 | .reduce([selectItem, state('list')], (selected, [id, list]) => {
17 | return list.find(item => item.id === id) || null;
18 | });
19 |
20 | state.connect();
21 |
22 | export default state;
23 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/client/utils.js:
--------------------------------------------------------------------------------
1 | export const createLinkHandler = (history) => {
2 | return (e) => {
3 | return e.preventDefault() || history.push(e.target.getAttribute('href'))
4 | };
5 | };
6 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redurx-snabbdom-observable-router-example",
3 | "private": true,
4 | "version": "0.1.0",
5 | "description": "An experiment with snabbdom and redurx",
6 | "main": "index.js",
7 | "scripts": {
8 | "clean": "rm -rf dist",
9 | "cp": "cp client/index.html dist",
10 | "build:js": "webpack",
11 | "build": "npm run clean && npm run build:js && npm run cp",
12 | "start": "node server.js"
13 | },
14 | "author": "Ryan Lynch (github.com/shiftyp)",
15 | "license": "ISC",
16 | "dependencies": {
17 | "babel-core": "^6.10.4",
18 | "babel-loader": "^6.2.4",
19 | "babel-plugin-syntax-jsx": "6.8.0",
20 | "babel-preset-es2015": "^6.9.0",
21 | "babel-snabbdom-jsx": "0.3.0",
22 | "express": "^4.14.0",
23 | "observable-router": "^0.1.0",
24 | "raw-loader": "^0.5.1",
25 | "redurx": "^0.4.0",
26 | "rx": "4.1.0",
27 | "snabbdom": "0.5.0",
28 | "snabbdom-rx-utils": "^0.1.1",
29 | "snabbdom-jsx": "0.3.0",
30 | "style-loader": "^0.13.1",
31 | "webpack": "^1.13.1"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/server.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var path = require('path');
3 |
4 | var app = new express();
5 | var port = process.env.PORT || 3000;
6 |
7 | app.use(express.static('./dist'));
8 |
9 | app.use('*', function(req, res) {
10 | res.sendFile(path.join(__dirname, './dist/index.html'));
11 | });
12 |
13 | app.listen(port, function(error) {
14 | if (error) {
15 | console.error(error);
16 | } else {
17 | console.info("Listening on port:", port);
18 | }
19 | });
20 |
--------------------------------------------------------------------------------
/examples/snabbdom-observable-router/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | devtool: 'source-map',
6 | entry: [
7 | './client/index.js'
8 | ],
9 | output: {
10 | path: './dist/js',
11 | filename: 'bundle.js',
12 | publicPath: '/js/'
13 | },
14 | plugins: [
15 | new webpack.optimize.OccurrenceOrderPlugin()
16 | ],
17 | module: {
18 | loaders: [
19 | {
20 | test: /\.js$/,
21 | loaders: [ 'babel' ],
22 | exclude: /node_modules/
23 | },
24 | {
25 | test: /\.css?$/,
26 | loaders: [ 'style', 'raw' ]
27 | },
28 | {
29 | test: /\.json$/,
30 | loader: 'json'
31 | }
32 | ]
33 | }
34 | };
35 |
--------------------------------------------------------------------------------
/examples/todomvc/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/examples/todomvc/README.md:
--------------------------------------------------------------------------------
1 | To build run:
2 | ```
3 | npm install
4 | npm run build
5 | ```
6 | The build index.html will be in the dist directory.
7 |
--------------------------------------------------------------------------------
/examples/todomvc/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redurx-todomvc",
3 | "version": "0.1.0",
4 | "private": true,
5 | "description": "A TodoMVC example using React and ReduRx",
6 | "main": "index.js",
7 | "scripts": {
8 | "clean": "rm -rf dist",
9 | "cp": "cp src/index.html dist",
10 | "build:js": "webpack",
11 | "build": "npm run clean && npm run build:js && npm run cp"
12 | },
13 | "author": "",
14 | "license": "ISC",
15 | "dependencies": {
16 | "babel-core": "^6.10.4",
17 | "babel-loader": "^6.2.4",
18 | "babel-preset-es2015": "^6.9.0",
19 | "babel-preset-react": "^6.11.1",
20 | "classnames": "^2.2.5",
21 | "raw-loader": "^0.5.1",
22 | "react": "^15.2.0",
23 | "react-dom": "^15.2.0",
24 | "recompose": "^0.20.2",
25 | "redurx": "^0.4.0",
26 | "style-loader": "^0.13.1",
27 | "todomvc-app-css": "^2.0.6",
28 | "todomvc-common": "^1.0.2",
29 | "webpack": "^1.13.1"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/examples/todomvc/src/actions/index.js:
--------------------------------------------------------------------------------
1 | import { createAction } from 'redurx';
2 |
3 | export const addTodo = createAction(todo => {
4 | return todo.filter(({ text }) => text.length > 0)
5 | });
6 | export const filterTodos = createAction();
7 | export const editNewTodo = createAction();
8 | export const deleteTodo = createAction();
9 | export const editTodo = createAction();
10 | export const saveTodo = createAction(todo => {
11 | return todo
12 | .doOnNext(({ text, id, }) => {
13 | if (text === '') {
14 | deleteTodo(id);
15 | }
16 | })
17 | .filter(({ text }) => text !== '')
18 | });
19 | export const toggleCompleted = createAction(todo => {
20 | return todo.map(todo => Object.assign({}, todo, {
21 | completed: !todo.completed
22 | }))
23 | })
24 | export const completeAll = createAction();
25 | export const clearCompleted = createAction();
26 |
--------------------------------------------------------------------------------
/examples/todomvc/src/components/app.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | import * as actions from '../actions';
4 |
5 | import Header from '../components/header';
6 | import MainSection from '../components/main-section';
7 |
8 | const createMainSection = (display) => {
9 | if (display.counts.total > 0) {
10 | return (
11 |
24 |
29 | {createMainSection(display)}
30 |
31 | );
32 | };
33 |
34 | App.propTypes = {
35 | display: PropTypes.object.isRequired,
36 | editor: PropTypes.object.isRequired
37 | };
38 |
39 | export default App;
40 |
--------------------------------------------------------------------------------
/examples/todomvc/src/components/footer.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import classnames from 'classnames';
3 | import { filters, filterKeys } from '../constants';
4 |
5 | const renderTodoCount = (activeCount) => {
6 | const itemWord = activeCount === 1 ? 'item' : 'items';
7 |
8 | return (
9 |
10 | {activeCount || 'No'} {itemWord} left
11 |
12 | );
13 | }
14 |
15 | const renderFilterItem = (filter, onFilter) => filterKey => {
16 | const filterTitle = filters[filterKey];
17 | const className = classnames({
18 | selected: filterTitle === filter
19 | });
20 | return (
21 |
22 | onFilter(filterTitle)}
26 | >
27 | {filterTitle}
28 |
29 |
30 | );
31 | };
32 |
33 | const Footer = ({
34 | completed,
35 | active,
36 | filter,
37 | onClearCompleted,
38 | onFilter
39 | }) => {
40 | return (
41 |
42 | {renderTodoCount(active)}
43 |
44 | {filterKeys.map(renderFilterItem(filter, onFilter))}
45 |
46 |
50 | Clear completed
51 |
52 |
53 | );
54 | };
55 |
56 | Footer.propTypes = {
57 | completed: PropTypes.number.isRequired,
58 | active: PropTypes.number.isRequired,
59 | filter: PropTypes.string.isRequired,
60 | onClearCompleted: PropTypes.func.isRequired,
61 | onFilter: PropTypes.func.isRequired
62 | };
63 |
64 | export default Footer;
65 |
--------------------------------------------------------------------------------
/examples/todomvc/src/components/header.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import TodoTextInput from './todo-text-input';
3 |
4 | const Header = ({ addTodo, editNewTodo, editor }) => {
5 | return (
6 |
16 | )
17 | };
18 |
19 | Header.propTypes = {
20 | addTodo: PropTypes.func.isRequired,
21 | editNewTodo: PropTypes.func.isRequired,
22 | editor: PropTypes.object.isRequired
23 | };
24 |
25 | export default Header;
26 |
--------------------------------------------------------------------------------
/examples/todomvc/src/components/main-section.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 |
3 | import TodoItem from './todo-item';
4 | import Footer from './footer';
5 | import filters from '../constants';
6 |
7 | const MainSection = ({
8 | actions,
9 | filter,
10 | filteredTodos,
11 | counts
12 | }) => {
13 | return (
14 |
33 | )
34 | };
35 |
36 | MainSection.propTypes = {
37 | actions: PropTypes.object.isRequired,
38 | filter: PropTypes.string.isRequired,
39 | filteredTodos: PropTypes.array.isRequired,
40 | counts: PropTypes.object.isRequired
41 | };
42 |
43 | export default MainSection;
44 |
--------------------------------------------------------------------------------
/examples/todomvc/src/components/todo-item.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import classnames from 'classnames';
3 | import TodoTextInput from './todo-text-input';
4 |
5 | const createElement = (todo, actions) => {
6 | if (todo.editing) {
7 | return
15 | {
23 | actions.editTodo(todo);
24 | }}
25 | >
26 | {todo.text}
27 |
28 | actions.deleteTodo(todo.id)}
31 | />
32 |
33 | )
34 | }
35 | }
36 |
37 | const TodoItem = ({ todo, actions }) => {
38 | const { editing, completed } = todo
39 | const className = classnames({
40 | completed,
41 | editing
42 | });
43 | const element = createElement(
44 | todo,
45 | actions
46 | );
47 | return (
48 |
49 | {element}
50 |
51 | );
52 | }
53 |
54 | export default TodoItem;
55 |
--------------------------------------------------------------------------------
/examples/todomvc/src/components/todo-text-input.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import classnames from 'classnames';
3 |
4 | const handleBlur = (todo, onSave) => e => {
5 | onSave({
6 | id: todo.id,
7 | text: e.target.value
8 | });
9 | };
10 | const handleChange = (todo, onEdit) => e => {
11 | onEdit({
12 | id: todo.id,
13 | text: e.target.value
14 | });
15 | };
16 | const handleKeyDown = (todo, onEdit, onSave) => e => {
17 | const text = e.target.value.trim();
18 | if (e.which === 13) {
19 | onSave({
20 | id: todo.id,
21 | text
22 | });
23 | } else {
24 | onEdit({
25 | id: todo.id,
26 | text
27 | });
28 | }
29 | };
30 | const getClassName = (isNew, todo) => classnames({
31 | edit: todo.editing,
32 | 'new-todo': isNew
33 | });
34 |
35 | const TodoTextInput = ({
36 | onSave,
37 | onEdit,
38 | todo,
39 | isNew,
40 | placeholder
41 | }) => {
42 | return (
43 | ReduRx TodoMVC Example
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/todomvc/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import setObservableConfig from 'recompose/setObservableConfig';
4 | import mapPropsStream from 'recompose/mapPropsStream';
5 | import rxjs4config from 'recompose/rxjs4ObservableConfig';
6 | import 'todomvc-app-css/index.css';
7 |
8 | import state from './state';
9 | import App from './components/app';
10 |
11 | setObservableConfig(rxjs4config);
12 |
13 | const enhance = mapPropsStream(propsStream => {
14 | return propsStream
15 | .combineLatest(
16 | state.asObservable(),
17 | (props, { display, editor }) => ({
18 | display,
19 | editor
20 | })
21 | );
22 | });
23 |
24 | const EnhancedApp = enhance(App);
25 |
26 | render( (https://github.com/shiftyp)",
33 | "bugs": {
34 | "url": "https://github.com/reactjs/redurx/issues"
35 | },
36 | "license": "ISC",
37 | "dependencies": {
38 | "babel-polyfill": "^6.9.1",
39 | "babel-snabbdom-jsx": "0.3.0",
40 | "rx": "^4.1.0"
41 | },
42 | "devDependencies": {
43 | "ava": "0.15.2",
44 | "babel-cli": "6.10.1",
45 | "babel-loader": "6.2.4",
46 | "babel-preset-es2015": "6.9.0",
47 | "webpack": "1.13.1"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/test/action/index.js:
--------------------------------------------------------------------------------
1 | import Rx from 'rx';
2 | import test from 'ava';
3 |
4 | import { createAction, connectAction } from '../../dist/action';
5 |
6 | test('createAction should return a function', t => {
7 | const action = createAction();
8 | t.true(typeof action === 'function');
9 | });
10 |
11 | test('createAction should accept a callback', t => {
12 | const testVal = 1;
13 | const cb = (obs) => {
14 | t.true(obs instanceof Rx.Observable);
15 | return obs.map((val) => val + 1);
16 | };
17 | t.plan(3);
18 | const action = createAction(cb);
19 | const observable = action.asObservable();
20 | t.true(observable instanceof Rx.Observable);
21 | observable.subscribe(val => t.is(val, testVal + 1));
22 | action(testVal);
23 | });
24 |
25 | test('createAction should throw error if callback does not return an observable', t => {
26 | const cbs = [
27 | () => undefined,
28 | () => null,
29 | () => {},
30 | () => 1
31 | ];
32 |
33 | cbs.forEach(cb => {
34 | t.throws(() => createAction(cb));
35 | });
36 | });
37 |
38 | test('createAction should accept no arguments', t => {
39 | const action = createAction();
40 | t.true(action.asObservable() instanceof Rx.Observable);
41 | });
42 |
43 | test('action should push a passed value onto the stream', t => {
44 | const testValue = {};
45 | const action = createAction();
46 | const subscription = action.asObservable().subscribe(
47 | value => t.is(value, testValue),
48 | err => t.fail(err)
49 | );
50 | t.plan(1);
51 | action(testValue);
52 | });
53 |
--------------------------------------------------------------------------------
/test/state/hooks.js:
--------------------------------------------------------------------------------
1 | import test from 'ava';
2 | import Rx from 'rx';
3 |
4 | import { createState } from '../../dist/state';
5 |
6 | test('should be able to hook into tree node', t => {
7 | const testErr = new Error('bar');
8 | const testVal = 42;
9 | const initialVal = {
10 | a: 1,
11 | b: {
12 | val: 2
13 | }
14 | };
15 | const finalVal = {
16 | a: 43,
17 | b: {
18 | val: 53
19 | }
20 | };
21 | const state = createState();
22 | const action = new Rx.Subject();
23 |
24 | state('foo.bar').setInitialState(initialVal);
25 |
26 | state('foo.bar').reduce(action, (state, val) => {
27 | t.deepEqual(state, initialVal);
28 | t.is(val, testVal);
29 | return finalVal
30 | })
31 |
32 | t.plan(3);
33 |
34 | state('foo.bar').asObservable().skip(1)
35 | .subscribe(val => t.deepEqual(val, finalVal));
36 |
37 | state.connect();
38 |
39 | action.onNext(testVal);
40 | });
41 |
42 | test('should be able to hook into leaf node on next and error', t => {
43 | const testErr = new Error('baz');
44 | const testVal = 42;
45 | const initialVal = 12;
46 | const finalVal = 54
47 | const state = createState();
48 | const action = new Rx.Subject();
49 |
50 | state('foo.bar').setInitialState(initialVal);
51 |
52 | state('foo.bar').reduce(action, (state, val) => {
53 | t.is(state, initialVal);
54 | t.is(val, testVal);
55 | return finalVal;
56 | });
57 |
58 | t.plan(3);
59 |
60 | state('foo.bar').asObservable().skip(1)
61 | .subscribe(val => t.deepEqual(val, finalVal));
62 |
63 | state.connect();
64 |
65 | action.onNext(testVal);
66 | });
67 |
68 | test('should be able to hook into multiple observables', t => {
69 | const finalVals = [
70 | [
71 | 1,
72 | null
73 | ],
74 | [
75 | 1,
76 | 2
77 | ]
78 | ]
79 | const state = createState();
80 | const action1 = new Rx.Subject();
81 | const action2 = new Rx.Subject();
82 | state('foo.bar', null).reduce([action1, action2], (state, vals) => {
83 | return vals;
84 | })
85 |
86 | t.plan(1);
87 |
88 |
89 | state('foo.bar').asObservable().skip(1).take(2).toArray()
90 | .subscribe(vals => t.deepEqual(vals, finalVals));
91 |
92 | state.connect();
93 |
94 | action1.onNext(finalVals[0][0]);
95 | action2.onNext(finalVals[1][1]);
96 | });
97 |
98 | test('An error should be thrown if a reducer returns undefined', t => {
99 | const state = createState({ foo: 1 });
100 | const node = state('foo');
101 | const action = new Rx.Subject();
102 |
103 | node.reduce(action, () => undefined);
104 |
105 | t.throws(() => action.onNext(1));
106 | });
107 |
108 | test('An error should be thrown if an error occurs within an action', t => {
109 | const state = createState({ foo: 1 });
110 | const node = state('foo');
111 | const action = new Rx.Subject();
112 |
113 | node.reduce(
114 | action.doOnNext(() => { throw new Error('bar') }),
115 | () => 2
116 | );
117 |
118 | t.throws(() => action.onNext(3));
119 | });
120 |
--------------------------------------------------------------------------------
/test/state/node.js:
--------------------------------------------------------------------------------
1 | import test from 'ava';
2 | import Rx from 'rx';
3 |
4 | import { createState } from '../../dist/state';
5 | import { createAction } from '../../dist/action';
6 |
7 | test('should be able to hook into leaf node observable prior to initial state', t => {
8 | const testVal = 42;
9 | const initialVal = 12;
10 | const finalVal = 54;
11 | const state = createState();
12 | const action = new Rx.Subject();
13 |
14 | state.connect();
15 |
16 | state('foo.bar').reduce(action, (state, val) => {
17 | t.is(state, initialVal);
18 | t.is(val, testVal);
19 | return finalVal;
20 | });
21 |
22 | t.plan(3);
23 |
24 | state('foo.bar').asObservable().skip(1)
25 | .subscribe(val => t.is(val, finalVal));
26 |
27 | state('foo.bar')
28 | .setInitialState(initialVal)
29 | .connect();
30 |
31 | action.onNext(testVal);
32 | });
33 |
34 | test('should be able to hook into tree node observable prior to initial state', t => {
35 | const testVal = 42;
36 | const initialVal = {
37 | a: 1,
38 | b: 2
39 | };
40 | const finalVal = {
41 | a: 43,
42 | b: 44
43 | }
44 | const state = createState();
45 | const action = new Rx.Subject();
46 | state('foo.bar').reduce(action, (state, val) => {
47 | t.deepEqual(state, initialVal);
48 | t.is(val, testVal);
49 | return finalVal;
50 | });
51 |
52 | t.plan(3);
53 |
54 | state('foo.bar').asObservable().skip(1)
55 | .subscribe(val => t.deepEqual(val, finalVal));
56 |
57 | state('foo.bar').setInitialState(initialVal);
58 |
59 | state.connect();
60 |
61 | action.onNext(testVal);
62 | });
63 |
64 | test('setInitialState should throw an error if called on a final node', t => {
65 | const state = createState();
66 | const node = state('foo');
67 | node.setInitialState(1);
68 | t.throws(() => node.setInitialState(2));
69 | t.throws(() => state.setInitialState({ foo: 3 }));
70 | });
71 |
72 | test('setInitialState should throw an error if children are added to a leaf node', t=> {
73 | const state = createState();
74 | const node = state('foo');
75 | node.setInitialState(1);
76 | t.throws(() => state.setInitialState({ foo: { bar: 1 }}));
77 | });
78 |
79 | test('node accessor should take initial state', t => {
80 | const fooState = 1;
81 | const bazState = {
82 | qux: 2
83 | };
84 | const state = createState();
85 | const foo = state('foo', fooState);
86 |
87 | t.plan(2);
88 |
89 | foo.asObservable().subscribe(val => t.is(val, fooState));
90 |
91 | state.connect();
92 |
93 | const baz = state('bar.baz', bazState);
94 |
95 | baz.asObservable().subscribe(val => t.deepEqual(val, bazState))
96 |
97 | baz.connect();
98 | });
99 |
100 | test('compose should create a node with values composed of the passed paths', t => {
101 | const expectedStates = [{
102 | foo: 1,
103 | baz: 1,
104 | foobaz: 1
105 | }, {
106 | foo: 2,
107 | baz: 2,
108 | foobaz: 2
109 | }];
110 | const state = createState({
111 | foo: 1,
112 | bar: {
113 | baz: 1
114 | },
115 | qux: {
116 | foobaz: 1
117 | }
118 | });
119 | const composed = state.compose({
120 | foo: 'foo',
121 | baz: 'bar.baz',
122 | foobaz: 'qux.foobaz'
123 | });
124 | const action = createAction();
125 |
126 | composed.asObservable().take(2).toArray()
127 | .subscribe(states => t.deepEqual(states, expectedStates));
128 |
129 | state.reduce(action, () => ({
130 | foo: 2,
131 | bar: {
132 | baz: 2
133 | },
134 | qux: {
135 | foobaz: 2
136 | }
137 | }));
138 |
139 | state.connect();
140 |
141 | t.plan(1);
142 |
143 | action();
144 | });
145 |
146 |
147 | test('composed node state should propogate reduced state to the nodes it is composed of', t => {
148 | const expectedStates = [{
149 | foo: 1,
150 | bar: {
151 | baz: 1
152 | },
153 | qux: {
154 | foobaz: 1
155 | }
156 | }, {
157 | foo: 2,
158 | bar: {
159 | baz: 2
160 | },
161 | qux: {
162 | foobaz: 2
163 | }
164 | }];
165 | const state = createState(expectedStates[0]);
166 | const composed = state.compose({
167 | foo: 'foo',
168 | baz: 'bar.baz',
169 | foobaz: 'qux.foobaz'
170 | });
171 | const action = createAction();
172 |
173 | composed.reduce(action, () => ({
174 | foo: 2,
175 | baz: 2,
176 | foobaz: 2
177 | }));
178 |
179 | state.asObservable().take(2).toArray()
180 | .subscribe(states => t.deepEqual(states, expectedStates));
181 |
182 | state.connect();
183 |
184 | t.plan(1);
185 |
186 | action();
187 | });
188 |
189 | test('composed node accessor should return the nodes it is composed of', t => {
190 | const state = createState({ foo: 1 });
191 | const composed = state.compose({ bar: 'foo' });
192 |
193 | t.is(state('foo').asObservable(), composed('bar').asObservable());
194 | })
195 |
--------------------------------------------------------------------------------
/test/state/tree.js:
--------------------------------------------------------------------------------
1 | import test from 'ava';
2 | import Rx from 'rx';
3 |
4 | import {
5 | createState
6 | } from '../../dist/state';
7 | import {
8 | createNode
9 | } from '../../dist/state/node';
10 | import {
11 | createAction
12 | } from '../../dist/action';
13 |
14 | test('createLeaf observable should have initial value', t => {
15 | const testVal = 2;
16 | t.plan(1);
17 | const state = createState(testVal)
18 | state
19 | .asObservable()
20 | .subscribe((val) => t.is(val, testVal));
21 | state.connect();
22 | });
23 |
24 | test('createLeaf observable should send distinct values from setNextState', t => {
25 | const testVals = [1, 2, 3];
26 | const state = createState()('foo.bar', testVals[0]);
27 | const action = new Rx.Subject();
28 |
29 | t.plan(1);
30 |
31 | state.reduce(action, (state, val) => val)
32 |
33 | state
34 | .asObservable()
35 | .take(3)
36 | .toArray()
37 | .subscribe((vals) => t.deepEqual(vals, testVals));
38 |
39 | state.connect();
40 |
41 | action.onNext(testVals[1]);
42 | action.onNext(testVals[1]);
43 | action.onNext(testVals[2]);
44 | action.onNext(testVals[2]);
45 | });
46 |
47 | test('createTree should create leaf nodes for passed children', t => {
48 | const state = {
49 | foo: 1,
50 | bar: 'string',
51 | baz: true,
52 | qux: null
53 | };
54 | const stateKeys = Object.keys(state).sort();
55 | const wrappedCreateNode = function({ getChildrenSubject, observable }) {
56 | let children;
57 |
58 | if (getChildrenSubject) {
59 | children = getChildrenSubject.getValue();
60 | t.deepEqual(stateKeys, Object.keys(children).sort());
61 | } else {
62 | t.pass();
63 | }
64 | return createNode.apply(null, arguments);
65 | };
66 | t.plan(stateKeys.length + 1);
67 | createState(state, wrappedCreateNode);
68 | });
69 |
70 | test('createTree should create tree nodes for passed children', t => {
71 | const state = {
72 | obj: {
73 | foo: 1,
74 | bar: 'string',
75 | baz: true,
76 | qux: null
77 | }
78 | };
79 | const nestedStateKeys = Object.keys(state.obj).sort();
80 | const wrappedCreateNode = function({ getChildrenSubject, observable }) {
81 | let children;
82 |
83 | if (getChildrenSubject) {
84 | children = getChildrenSubject.getValue();
85 | if (!children.hasOwnProperty('obj')) {
86 | t.deepEqual(nestedStateKeys, Object.keys(children).sort());
87 | }
88 | } else {
89 | t.pass();
90 | }
91 | return createNode.apply(null, arguments);
92 | };
93 | t.plan(nestedStateKeys.length + 1);
94 | createState(state, wrappedCreateNode);
95 | });
96 |
97 | test('createTree node should combine and propogate child state', t => {
98 | const states = [{
99 | obj: {
100 | foo: 1,
101 | bar: 'string',
102 | baz: true,
103 | qux: null
104 | }
105 | },{
106 | obj: {
107 | foo: 2,
108 | bar: 'string',
109 | baz: true,
110 | qux: null
111 | }
112 | },{
113 | obj: {
114 | foo: -1,
115 | bar: 'someOtherString',
116 | baz: null,
117 | qux: true
118 | }
119 | }];
120 |
121 | const fooAction = new Rx.Subject();
122 | const objAction = new Rx.Subject();
123 |
124 | const node = createState(states[0]);
125 |
126 | t.plan(1);
127 |
128 | node.asObservable().take(3).toArray().subscribe((newStates) => {
129 | t.deepEqual(states, newStates)
130 | });
131 | // combine
132 | node('obj.foo').reduce(fooAction, () => states[1].obj.foo);
133 | // propogate
134 | node('obj').reduce(objAction, () => states[2].obj);
135 |
136 | node.connect();
137 |
138 | fooAction.onNext(1);
139 | objAction.onNext(2);
140 | });
141 |
142 | test('separate hooks into a single action should lead to one update on parent', t => {
143 | const states = [{
144 | a: 1,
145 | b: 2
146 | },{
147 | a: 3,
148 | b: 4
149 | },{
150 | a: 5,
151 | b: 6
152 | }];
153 |
154 | const singleAction = new Rx.Subject();
155 |
156 | const node = createState(states[0]);
157 |
158 | t.plan(1);
159 |
160 | node.asObservable().take(3).toArray().subscribe((newStates) => {
161 | t.deepEqual(states, newStates)
162 | });
163 |
164 | node('a').reduce(singleAction, (state, i) => states[i].a);
165 | node('b').reduce(singleAction, (state, i) => states[i].b);
166 |
167 | node.connect();
168 |
169 | singleAction.onNext(1);
170 | singleAction.onNext(2);
171 | });
172 |
173 | test.cb('children should be pruned if excluded from reduced state', t => {
174 | const state = createState({ foo: 1, bar: 1 });
175 | const pruneAction = createAction();
176 | const testAction = createAction();
177 | const pruneState = state('bar');
178 |
179 | // The 2 is significant, if changed change
180 | // pruneState subscription
181 | pruneState.reduce(testAction, () => 2);
182 |
183 | pruneState.asObservable().subscribe((val) => {
184 | // Val will equal 2 if the subscription
185 | // is active when testAction is called.
186 | // Initial state of 'bar' is expected to
187 | // be not 2
188 | if (val === 2) {
189 | t.fail()
190 | }
191 | // completed will be called when a node is
192 | // pruned, all subscriptions to the node's
193 | // observable will be disposed as well on
194 | // the next tick.
195 | }, null, () => t.pass());
196 |
197 | state.reduce(pruneAction, state => ({ foo: 1 }));
198 |
199 | state.connect();
200 |
201 | t.plan(1);
202 |
203 | pruneAction();
204 |
205 | // Test that subscriptions have been disposed
206 | setTimeout(() => testAction() || t.end());
207 | });
208 |
209 | test('reducers should be able to add children dynamically if in reduced state', t => {
210 | const state = createState({ foo: 1 });
211 | const addAction = createAction();
212 |
213 | state.reduce(addAction, () => ({ foo: 1, bar: 1, baz: 1 }));
214 |
215 | t.plan(2);
216 |
217 | // This will create a provisional node to be
218 | // populated by the reducer.
219 | state('bar')
220 | .asObservable()
221 | .subscribe(val => t.is(val, 1));
222 |
223 | state.connect();
224 |
225 | addAction();
226 |
227 | // This node didn't have a provisional node,
228 | // but we should be able to access the one
229 | // created by reduce.
230 | state('baz')
231 | .asObservable()
232 | .subscribe(val => t.is(val, 1));
233 |
234 | // Because no provisional node existed when
235 | // we connected the state, we have to connect
236 | // the new node here.
237 | state('baz').connect();
238 | });
239 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var webpack = require('webpack');
4 |
5 | var config = {
6 | devtool: 'source-map',
7 | entry: './lib/index.js',
8 | module: {
9 | loaders: [
10 | { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }
11 | ]
12 | },
13 | output: {
14 | library: 'ReduRx',
15 | libraryTarget: 'umd',
16 | path: './browser',
17 | filename: 'redurx.min.js'
18 | },
19 | plugins: [
20 | new webpack.optimize.OccurrenceOrderPlugin(),
21 | new webpack.optimize.UglifyJsPlugin({
22 | compressor: {
23 | pure_getters: true,
24 | unsafe: true,
25 | unsafe_comps: true,
26 | warnings: false
27 | }
28 | })
29 | ]
30 | };
31 |
32 | module.exports = config;
33 |
--------------------------------------------------------------------------------