react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

react-redux-controller

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.

Philosophy

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:

The ancestors of a component are not responsible for conveying dependencies to via props -- particularly when it comes to dependencies the ancestors don't use themselves.
The components are not coupled to Redux in any way -- no connect distributed throughout the component tree.
There are no smart components. Well there's one, but it's hidden inside the Controller.
Action creators do not perform any fetching. They are only responsible for constructing action objects, as is the case in vanilla Redux, with no middleware needed.

Usage

The controller factory requires 3 parameters:

The root component of the UI component tree.
An object that holds controller generator functions.
Any number of selector bundles, which are likely simply imported selector modules, each selector annotated a 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:

// controllers/app_controller.jsimport{controller,getProps}from'react-redux-controller';importAppLayoutfrom'../components/app_layout';import*asactionsfrom'../actions';import*asmySelectorsfrom'../selectors/my_selectors';constcontrollerGenerators={*initialize(){// ... any code that should run before initial render (like loading actions)},*onUserActivity(meaningfulParam){const{ dispatch, otherData }=yieldgetProps;dispatch(actions.fetchingData());try{constapiData=yieldhttpRequest(`http://myapi.com/${otherData}`);returndispatch(actions.fetchingSuccessful(apiData));}catch(err){returndispatch(actions.errorFetching(err));}},// ... other controller generators follow};constselectorBundles=[mySelectors,];exportdefaultcontroller(AppLayout,controllerGenerators,selectorBundles);

Example

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.

Name		Name	Last commit message	Last commit date
example		example
lib		lib
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
LICENSE.md		LICENSE.md
README.md		README.md
package.json		package.json

Name		Name	Last commit message	Last commit date
example		example
lib		lib
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
LICENSE.md		LICENSE.md
README.md		README.md
package.json		package.json

Name		Name	Last commit message	Last commit date
example		example
lib		lib
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
LICENSE.md		LICENSE.md
README.md		README.md
package.json		package.json

Name		Name	Last commit message	Last commit date
example		example
lib		lib
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
LICENSE.md		LICENSE.md
README.md		README.md
package.json		package.json

Name		Name	Last commit message	Last commit date
example		example
lib		lib
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
LICENSE.md		LICENSE.md
README.md		README.md
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation

react-redux-controller

Philosophy

Usage

Example

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

react-redux-controller

Philosophy

Usage

Example

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

react-redux-controller

Philosophy

Usage

Example

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

react-redux-controller

Philosophy

Usage

Example

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

react-redux-controller

Philosophy

Usage

Example

About

Resources

Stars

Watchers