Indeed engineers Gaurav Mathur and Jing Wang presented about how we built Indeed's My Jobs functionality using ReactJS and Redux.

1. Indeed My Jobs
A case study in ReactJS and Redux

2. Gaurav Mathur
Software Engineer

3. I help
people
get jobs.

8. What happens next?

9. Following up

10. Scheduling an interview

11. Preparing an interview

12. Negotiating your offer

13. Making a decision

16. Why React?

17. Virtual DOM

18. JSX

19. Data flow

21. MainDisplay

22. ViewList

23. JobTable

24. JobRow

25. MainDisplay
ViewListJobTable
JobRow

26. MainDisplay
State: jobs, counts
ViewListJobTable
JobRow

27. Props: counts
MainDisplay
State: jobs, counts
ViewListJobTable
JobRow

28. MainDisplay
State: jobs, counts
ViewListJobTable
JobRow
Props: jobs, updateHandler

29. MainDisplay
State: jobs, counts
ViewListJobTable
JobRow
Props: job, updateHandler

31. JobRow
MainDisplay
ViewListJobTable
this.props.handleUpdate(job, state)

32. this.props.handleUpdate(job, state)
JobRow
MainDisplay
ViewListJobTable

33. this.setState({jobs:newJobs, counts:newCounts});
JobRow
MainDisplay
ViewListJobTable

34. this.render(); //automatically fired
JobRow
MainDisplay
ViewListJobTable

35. Component
Component
Component
Component
this.props.handleUpdate(job, state)
this.props.handleUpdate(job, state)
this.props.handleUpdate(job, state)

37. Flux

38. View

39. View
Action

40. View
Dispatcher
Action

41. View
Dispatcher
StoreAction

42. View
Dispatcher
StoreAction

44. Transition the job
Transition Job
Job Row
Action = {
type: JobActions.APPLY,
job: job
};

45. Dispatch the action
MyJobsDispatcher.handleAction({
type: JobActions.APPLY,
job: job
});
Transition Job
Dispatcher
Job Row

46. function handleChange(action) {
...
switch (action.type) {
case JobActions.APPLY:
job.set('state', States.APPLIED);
break;
...
}
JobStore.emitChange();
}
JobStore.dispatchToken = MyJobsDispatcher.register(handleChange);
Update Job Store
Transition Job
Dispatcher
Job Store
Job Row

47. function handleChange(action) {
MyJobsDispatcher.waitFor(
[JobStore.dispatchToken]
);
...
JobCountsStore.emitChange();
}
Update Job Counts
Transition Job
Dispatcher
Job StoreJob Count Store
Job Row

48. ListenableStore.prototype = {
emitChange() {
for (let i = 0; i < this.listeners.length; i++) {
this.listeners[i]();
}
},
...
}
Listen for changes

49. const changeAggregator = new ChangeAggregator(
MyJobsDispatcher, storesToListenTo
);
const MainDisplay = React.createClass({
componentDidMount() {
changeAggregator.addChangeListener(this.update);
}
...
});
Collect changes

50. const MainDisplay = React.createClass({
...
update() {
this.setState({
jobs: JobStore.getJobs(),
counts: JobCountStore.getCounts(),
...
});
}
});
Transition Job
Dispatcher
Job StoreJob Count Store
Job Row
View List Job Table
Update views

51. Shortcomings

52. Boilerplate
ListenableStore
ChangeAggregator
MyjobsDispatcher

53. Best Practices & Testability
// TODO: Should this be in a different place..?
window.scrollTo(0, 0);
ViewStore.emitChange();
ViewStore.js

54. Borrowed from: https://twitter.com/denisizmaylov/status/672390003188703238

55. Jing Wang
Software Engineer

56. I help
people
get jobs.

57. Borrowed from: https://twitter.com/denisizmaylov/status/672390003188703238

58. Single source of truth

59. Application State Tree

60. State is read only

61. Dispatcher & Actions

62. Pure functions

63. Reducers

64. Redux Store

65. Single source of truth
const createStore = (reducer) => {
let state = {};
const getState = () => state;
let listeners = [];
const subscribe = (listener) => {
listeners.push(listener);
}
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
return {getState, dispatch, subscribe};
}

66. State is read only
const createStore = (reducer) => {
let state = {};
const getState = () => state;
let listeners = [];
const subscribe = (listener) => {
listeners.push(listener);
}
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
return {getState, dispatch, subscribe};
}

67. Changes are made with pure functions
const createStore = (reducer) => {
let state = {};
const getState = () => state;
let listeners = [];
const subscribe = (listener) => {
listeners.push(listener);
}
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
return {getState, dispatch, subscribe};
}

68. Emit changes
const createStore = (reducer) => {
let state = {};
const getState = () => state;
let listeners = [];
const subscribe = (listener) => {
listeners.push(listener);
}
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
return {getState, dispatch, subscribe};
}

69. Single reducer
const createStore = (reducer) => {
let state = {};
const getState = () => state;
let listeners = [];
const subscribe = (listener) => {
listeners.push(listener);
}
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
return {getState, dispatch, subscribe};
}

70. const myjobsReducer(state = new AppState(), action) => {
state = state.set('jobs', jobsReducer(state.jobs, action));
state = state.set('jobCounts', jobCountsReducer(state.jobCounts, action, state.jobs));
...
return state;
}
Combining reducers

71. const myjobsStore = createStore(myjobsReducer);
<MainDisplay
store={myjobsStore}
...
/>
Store as an explicit prop

72. const myjobsStore = createStore(myjobsReducer);
<MainDisplay
store={myjobsStore}
...
/>
<ViewList
store={this.props.myjobsStore}
...
/>
Store as an explicit prop

73. const myjobsStore = createStore(myjobsReducer);
<MainDisplay
store={myjobsStore}
...
/>
<ViewList
store={this.props.myjobsStore}
...
/>
<JobTable
store={this.props.myjobsStore}
...
/>
Store as an explicit prop

74. react-redux Provider
const myjobsStore = createStore(myjobsReducer);
<Provider store={myjobsStore}>
<MainDisplay />
</Provider>
MainDisplay
Provider
myjobsStore

75. const myjobsStore = createStore(myjobsReducer);
<Provider store={myjobsStore}>
<MainDisplay />
</Provider>
react-redux Provider
JobRow
MainDisplay
ViewListJobTable
Provider
myjobsStore
Provided store: {myjobsStore}

76. connect(mapStateToProps, mapDispatchToProps, ...) {
}
react-redux connect

77. mapStateToProps
function mapStateToProps(state) {
return {
jobsState: state.jobs
};
}

78. const mapDispatchToProps = (dispatch) => {
return {
handleAction: (action) => {
dispatch(action);
}
};
}
mapDispatchToProps

79. connect(mapStateToProps, mapDispatchToProps, ...) {
...
return function wrapWithConnect(WrappedComponent) {
class Connect extends Component {
...
return Connect;
};
}
}
react-redux connect

80. react-redux connect
Connect
constructor(props, context) {
this.store = props.store || context.store;
this.state = { this.store.getState() };
};

81. Connect
...
componentDidMount() {
this.store.subscribe(this.handleChange.bind(this));
}
handleChange() {
this.setState({ this.store.getState() })
}
react-redux connect

82. Connect
...
render() {
this.renderedElement = createElement(
WrappedComponent, this.mergedProps
);
return this.renderedElement;
}
react-redux connect

83. Connect
...
render() {
this.renderedElement = createElement(
WrappedComponent, this.mergedProps
);
return this.renderedElement;
}
mergedProps: {
...parentProps,
...mapStateToProps,
...mapDispatchToProps
}
react-redux connect

84. import { connect } from 'react-redux';
...
const matchStateToProps => (state) {
return {
jobsState: state.jobs
};
}
module.exports = connect(matchStateToProps)(JobTable);
JobTable.js

85. JobRow.js
import { connect } from 'react-redux';
...
module.exports = connect()(JobRow);

86. Connect
Connect Connect
Connect
JobRow
MainDisplay
ViewListJobTable

88. const createStore = (reducer) => {
...
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
}
myjobsStore
{type:"APPLY",jobKey:"7b14...",...}
Job Row

89. const createStore = (reducer) => {
...
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
}
Job Row
myjobsStore
myjobsReducer
state

90. const createStore = (reducer) => {
...
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
}
Job Row
myjobsStore
myjobsReducer
state
newState

91. const createStore = (reducer) => {
...
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
}
JobTable
Job Row
myjobsStore
myjobsReducer
state
newState

92. jobReducerJobStore
Flux stores to Redux reducers
...
Flux Redux
jobCountsReducerJobCountsStore

93. ...
store.subscribe(() => {
if (view !== newView) {
window.scrollTo(0, 0);
}
});
Side effects in separate handlers

94. Less boilerplate code
createStore
ListenableStore
ChangeAggregator
MyJobsDispatcher
Flux ReduxFlux Redux

95. Less boilerplate code
connect
addChangeListener()
JobStore.getJobs()
Flux Redux

96. Less boilerplate code
combineReducerswaitFor()
Flux Redux

97. Easier to unit test

98. Well unit tested state transition logic
Less code to maintain
Code easier to follow
Results

99. engineering.indeed.com
www.indeed.jobs