-
Notifications
You must be signed in to change notification settings - Fork 14.4k
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.
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
Created store and reducers #1108
Created store and reducers #1108
Conversation
vera-liu
commented
Sep 14, 2016
•
edited
Loading
edited
- Four objects in store: TimeFilter, GroupBy, Sql and Filter
- For the four object-stores above, action can be fired once the query button is pressed
- For the stores that are not contained in objects (datasourceId, vizType, columns, ordering, etc.) the actions will be fired once the field is changed, for instance, the user could see updated visualization once he selects a different viz_type without clicking the query button.
col: null, | ||
}; | ||
|
||
export const initialState = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think initialState
should go in the store
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i mean put initial state in a file called store.js
then rather than importing initial state from ./reducers.js
, import from store.js
the way you are creating the store looks good.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Got it!
this is looking really good! i think now would be a good time to add tests for the reducers and actions. this is a good example of logging your state to test in browser, to make sure your actions are returning the new state correctly: http://redux.js.org/docs/basics/Store.html#dispatching-actions |
808bcbf
to
a45f617
Compare
filters: [defaultFilter], | ||
}; | ||
|
||
function addToArr(state, arrKey, obj) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All of these helper functions are copy-pasted from SqlLab/reducer.jsx
, let's refactor them in some reducerUtils.jsx
module. Copy-pasting code is bad because it then needs to be maintained in multiple places.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, definitely great idea to share these utils. best place for them would be caravel/assets/javascripts/utils/
, then all reducers can import from there.
reducerUtils.js
export function addToArr(state, arrKey, obj) {
...
}
export function someOtherUtil(state, arrKey, obj) {
...
}
import { addToArr, someOtherUtil } from '../utils/reducerUtils.js
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done:)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
great! looks like you just need to push your new changes...
return { type: SET_SQL, sql }; | ||
} | ||
|
||
export function addFilter(filter) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After a bit of experience on Redux, I think passing objects to action creators isn't a great pattern because there's no place where the object structure is defined except for where it's being created. If it's being created in only one place in the codebase it isn't too bad, but if many places in the code need to create the object there's no central place for constructor-type logic.
After a bit of thinking I now think that action creator is the right place to act as a constructor. Meaning the action creator would detail which param the object has, and implement constructor logic if any.
@ascott , thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i'm not sure i get what you are suggesting here... could you clarify?
@@ -112,6 +112,7 @@ | |||
"react-addons-test-utils": "^0.14.8", | |||
"react-dom": "^0.14.8", | |||
"style-loader": "^0.13.0", | |||
"tape": "^4.6.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should remove this dependency since we will stick with mocha for testing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done:)
@@ -0,0 +1,190 @@ | |||
import React from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this file should be located in caravel/assets/spec/javascripts/explore/actions/
and be renamed to actions_spec.js
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done:)
@@ -0,0 +1,71 @@ | |||
export const SET_DATASOURCE = 'SET_DATASOURCE'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's move this to caravel/assets/javascripts/explorev2/actions
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done:)
@@ -0,0 +1,89 @@ | |||
import shortid from 'shortid'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's move this to caravel/assets/javascripts/explorev2/reducers
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done:)
@@ -0,0 +1,39 @@ | |||
import shortid from 'shortid'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's move this to caravel/assets/javascripts/explorev2/stores
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done:)
import shortid from 'shortid'; | ||
import * as actions from '../../../../javascripts/explorev2/actions'; | ||
import { initialState } from '../../../../javascripts/explorev2/store'; | ||
import { exploreReducer } from '../../../../javascripts/explorev2/reducers'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the import name and file name should be the same according to our style guide: https://github.com/airbnb/javascript#naming--filename-matches-export
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done:)
67a69e4
to
b9648b9
Compare
b9648b9
to
ad318ee
Compare
@@ -1,6 +1,7 @@ | |||
import shortid from 'shortid'; | |||
import * as actions from './actions'; | |||
import { now } from '../modules/dates'; | |||
import * as utils from '../../utils/reducerUtils'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would be nice to use destructuring here: so you don't have to use utils.addToArr
elsewhere.
const { addToArr, removeFromArr, alterInArr, alterInObject } from '../../utils/reducerUtils';
import { exploreReducer } from './reducers/exploreReducer'; | ||
import persistState from 'redux-localstorage'; | ||
|
||
let enhancer = compose(persistState()); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think i've seen this pattern in sql-lab too, would be great to add to redux utils.
/>, | ||
<Provider store={store}> | ||
<ExploreViewContainer | ||
data={bootstrapData} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is there any data from the server in bootstrapData
that can be used to bootstrap the initial state? i think we get vizType
and datasourceID
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
so above we probably want to do
const bootstrappedState = Object.assign(initialState, {
datasourceId: bootstrapData.datasourceId,
vizType: bootstrapData.vizType
});
const store = createStore(exploreReducer, bootstrappedState, enhancer);
e3c339e
to
1fe90e8
Compare
1fe90e8
to
352ae51
Compare
Made modifications based on all of the comments, the python tests are failing, is it expected and safe to merge? @ascott |
yeah, this is safe to merge since we are just merging to in the mean time @vera-liu let's merge! |
import { connect, Provider } from 'react-redux'; | ||
|
||
import { initialState, sqlLabReducer } from './reducers'; | ||
import persistState from 'redux-localstorage'; | ||
import { enhancer } from '../../utils/common'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i wonder if this should go in a reduxUtils.js
file rather than just common utils...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sorry merged in too early ;( I'll fix this in my next refactor_explore PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
np, just a thought for another PR 👌
* Created store and reducers * Added spec * Modifications based on comments
…1205) * create structure for new forked explore view (#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Associate version to entry files (#1060) * Associate version to entry files * Modified path joins for configs * Made changes based on comments * Created store and reducers (#1108) * Created store and reducers * Added spec * Modifications based on comments * Explore control panel components: Chart control, Time filter, SQL, GroupBy and Filters * Modifications based on comments
* Explore control panel - Chart control, TimeFilter, GroupBy, Filters (#1205) * create structure for new forked explore view (#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Associate version to entry files (#1060) * Associate version to entry files * Modified path joins for configs * Made changes based on comments * Created store and reducers (#1108) * Created store and reducers * Added spec * Modifications based on comments * Explore control panel components: Chart control, Time filter, SQL, GroupBy and Filters * Modifications based on comments * accommodate old and new explore urls * move bootstrap data up in scope * fix code climate issues * fix long lines * fix syntax error
…pache#1205) * create structure for new forked explore view (apache#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Associate version to entry files (apache#1060) * Associate version to entry files * Modified path joins for configs * Made changes based on comments * Created store and reducers (apache#1108) * Created store and reducers * Added spec * Modifications based on comments * Explore control panel components: Chart control, Time filter, SQL, GroupBy and Filters * Modifications based on comments
* Explore control panel - Chart control, TimeFilter, GroupBy, Filters (#1205) * create structure for new forked explore view (#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Associate version to entry files (#1060) * Associate version to entry files * Modified path joins for configs * Made changes based on comments * Created store and reducers (#1108) * Created store and reducers * Added spec * Modifications based on comments * Explore control panel components: Chart control, Time filter, SQL, GroupBy and Filters * Modifications based on comments * Added access check + Druid in endpoint * pull grains to constants * Switch explore.html to old version
…pache#1205) * create structure for new forked explore view (apache#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Associate version to entry files (apache#1060) * Associate version to entry files * Modified path joins for configs * Made changes based on comments * Created store and reducers (apache#1108) * Created store and reducers * Added spec * Modifications based on comments * Explore control panel components: Chart control, Time filter, SQL, GroupBy and Filters * Modifications based on comments
* create structure for new forked explore view (#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Created store and reducers (#1108) * Created store and reducers * Added spec * Modifications based on comments * do use bootstrap data for now * don't deal with bootstrap data for now * use victory as a base * import fake line data, add fake panels, make chart fixed * add fetch support * get slice data from json endpoint * render chart with slicejson * update chart and label demo * remove fetch config * remove dummy control panels * should be a func * make TimeSeriesLineChart * add a comment * inner height for height * don't need fetch yet * trailing comma breaks in package json * pass in viz data from props * add style sheet * set height on explore container * add legend * make chart responsive to window resize * can't use head_css in template bc overrides head_css in basic * fix linting * break labelItem into own SFC, make legend SFC * add propTypes and fix linter