Name: react-redux-controller
Owner: Artsy
Description: Library for creating a controller layer to link React and Redux, on top of react-redux.
Created: 2015-12-29 07:59:36.0
Updated: 2018-04-20 21:46:01.0
Pushed: 2018-02-12 17:54:05.0
Homepage: null
Size: 56
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
react-redux-controller is a library that adds some opinion to the react-redux binding of React components to the Redux store. It creates the entity of a Controller
, which is intended to be the single point of integration between React and Redux. The controller passes data and callbacks to the UI components via the React context
. It's one solution to the question of how to get data and controller-like methods (e.g. event handlers) to the React UI components.
Note Although react-redux-controller continues to be used in production at Artsy, it is not actively being developed. We may or may not continue to develop it. The issues on the future of the architecture should be considered a doucment on lessons learned, rather than an intention to actually release a future version. Anyone should feel free use this code as-is or develop their own fork.
This library takes the opinion that React components should solely be focused on the job of rendering and capturing user input, and that Redux actions and reducers should be soley focused on the job of managing the store and providing a view of the state of the store in the form of selectors. The plumbing of distributing data to components, as well as deciding what to fetch, when to fetch, how to manage latency, and what to do with error handling, should be vested in an explicit controller layer.
This differs from alternative methods in a number of ways:
props
– particularly when it comes to dependencies the ancestors don't use themselves.connect
distributed throughout the component tree.The controller factory requires 3 parameters:
propType
that indicates what kind of data it provides.The functionality of the controller layer is implemented using generator functions. Within these functions, yield
may be used await the results of Promises and to request selector values and root component properties. As a very rough sketch of how you might use this library:
ontrollers/app_controller.js
rt { controller, getProps } from 'react-redux-controller';
rt AppLayout from '../components/app_layout';
rt * as actions from '../actions';
rt * as mySelectors from '../selectors/my_selectors';
t controllerGenerators = {
nitialize() {
// ... any code that should run before initial render (like loading actions)
nUserActivity(meaningfulParam) {
const { dispatch, otherData } = yield getProps;
dispatch(actions.fetchingData());
try {
const apiData = yield httpRequest(`http://myapi.com/${otherData}`);
return dispatch(actions.fetchingSuccessful(apiData));
} catch (err) {
return dispatch(actions.errorFetching(err));
}
... other controller generators follow
t selectorBundles = [
Selectors,
rt default controller(AppLayout, controllerGenerators, selectorBundles);
To see an in-depth example of usage of this library, the async example from the redux guide is ported to use the controller approach in this repo.