6 | 
8 | \{{get-state "state.path"}}
37 |
38 | helper to fetch and subscribe to state properties in the redux store
39 |
40 |
41 |
48 |
42 | \{{!-- component.hbs --}}
43 | \{{progress-bar
44 | progress=(get-state 'progress')
45 | }}
46 |
49 | Use object paths just like you would with Ember.get
50 |
51 |
52 |
59 |
53 | \{{!-- component.hbs --}}
54 | \{{todo-item
55 | todo=(get-state 'todos.firstObject')
56 | }}
57 | \{{dispatch "TYPE" prop=value prop=value}}
63 |
64 | closure action helper to dispatch directly to the redux store
65 |
66 |
67 |
86 |
68 | \{{!-- component.hbs --}}
69 | <button
70 | onclick=\{{dispatch 'ADD' value=value}}>
71 | Click to Add
72 | </button>
73 |
75 | //reducer.js
76 | export default (state=0, action) => {
77 |
78 | if(action.type === 'ADD') {
79 | state += action.value;
80 | }
81 |
82 | return state;
83 | };
84 |
87 | arguments provided while invoking the action can be referenced via the invocationArgs array property
88 |
89 |
90 |
114 |
91 | \{{!-- component.hbs --}}
92 | <input
93 | onchange=(dispatch 'UPDATE' field='title')
94 | >
95 |
97 | //reducer.js
98 | export default (state={}, action) => {
99 |
100 | if (action.type === 'UPDATE') {
101 |
102 | let { field, invocationArgs } = action;
103 | state = Object.assign(state, {
104 | //invocaionArgs contains the event obj
105 | [field]: invocationArgs[0].target.value
106 | });
107 |
108 | }
109 |
110 | return state;
111 | };
112 |