redux-view

library0.2.1jsnpmunverified

A view wrapper for Redux and React-Router that simplifies mapping between routes, handling data fetching on route transitions, and navigating from dispatch functions. Current stable version is 0.2.1 (last released in 2016). Release cadence is low/unmaintained. Key differentiators: provides initialize/terminate lifecycle hooks that work even when routes share the same component (solving a common react-router gotcha), and injects the router as a third parameter to mapDispatchToProps for easy navigation. Requires react-redux 4.x, react-router >=2.0.0 or ^4.0.0-alpha.0, and lodash 4.x.

web-framework http-networking

npm install redux-view

github ↗package ↗

INSTALL

IMPORT

SIG · REDUX-VIEW

redux-view

web-frameworkjavascriptv0.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (ReduxView)

✓ import ReduxView from 'redux-view'

✗ const ReduxView = require('redux-view').default

Library provides a default export; require with .default only needed if mixing CJS.

ReduxView class

✓ class MyView extends ReduxView { ... }

✗ class MyView extends ReduxView.default { ... }

Default export is the class itself.

initialize method

✓ class MyView extends ReduxView { initialize = ({ dispatch }) => { ... } }

✗ class MyView extends ReduxView { constructor() { this.initialize = () => {} } }

initialize is an instance method property, not set in constructor.

Basic usage: extending ReduxView class, defining container, initialize, and mapStateToProps, then rendering with react-redux Provider and react-router Route.

import ReduxView from 'redux-view'; import { createStore, combineReducers } from 'redux'; import { Provider } from 'react-redux'; import { BrowserRouter, Route } from 'react-router-dom'; import React from 'react'; import { render } from 'react-dom'; class HomeView extends ReduxView { container = ({ message }) => <h1>{message}</h1>; initialize = ({ dispatch }) => { dispatch({ type: 'SET_MESSAGE', payload: 'Welcome!' }); }; mapStateToProps = (state) => ({ message: state.message, }); } const reducer = (state = { message: '' }, action) => { switch(action.type) { case 'SET_MESSAGE': return { ...state, message: action.payload }; default: return state; } }; const store = createStore(combineReducers({ message: reducer })); const App = () => ( <Provider store={store}> <BrowserRouter> <Route path="/" component={HomeView} /> </BrowserRouter> </Provider> ); render(<App />, document.getElementById('root'));

Debug

Known issues

deprecatedredux-view is unmaintained (last release 2016). No updates for react-redux >=5.x or react-router >=5.x. Use modern alternatives like react-router hooks or useReducer.

fix

Migrate to react-router v6 with hooks (useNavigate, useParams) and react-redux v7+ with hooks (useSelector, useDispatch).

affects: all

breakingreact-router v4 changed routing API; react-router-dom is separate package. This library's integration may not work with versions > 4.0.0-alpha.0.

fix

Verify react-router version; use react-router-dom v4 or earlier. For v4+, the library may not function correctly.

affects: >=4.0.0

gotchainitialize and terminate methods rely on componentWillReceiveProps to detect route changes. This lifecycle is deprecated in React 16.3+ and may be removed in React 17+. In React 16+, they still work but with warnings.

fix

Use getDerivedStateFromProps or useEffect in modern React. Library is not compatible with React Suspense or Concurrent Mode.

affects: >=16.3

deprecatedLibrary uses React.createClass internally? No, it expects class syntax. But the pattern of class properties for lifecycle hooks is non-standard and may not work with modern transpilers (e.g., if class fields are not supported).

fix

Ensure your build pipeline supports class properties (e.g., Babel plugin @babel/plugin-proposal-class-properties).

affects: all

breakingThe mapDispatchToProps third parameter (router) exposes a transitionTo method. With react-router v4+, router object is different and may not have transitionTo. Use history.push instead.

fix

Use react-router v4's withRouter HOC or hooks to get history, or use the library's built-in router parameter but ensure compatibility.

affects: >=4.0.0

Errors

Common errors & fixes

Class extends value undefined is not a constructor or null

Importing ReduxView incorrectly (e.g., import { ReduxView } instead of default import).

fix

Use import ReduxView from 'redux-view' (default import).

can't resolve 'redux-view' in ...

Package not installed or typo in import path.

fix

Run npm install --save redux-view and check import path is correct (no subpath).

Cannot read property 'transitionTo' of undefined

Using router parameter in mapDispatchToProps but react-router version does not provide transitionTo (e.g., v4+).

fix

Use react-router v3 or pass history directly. For v4+, use withRouter or hooks.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

Library uses UNSAFE_componentWillReceiveProps internally. React 16.3+ shows deprecation warning.

fix

Ignore warning (still works) or consider migrating away from redux-view.

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

lodashrequiredpeer dependency specified as 4.x

react-reduxrequiredpeer dependency for connect and Provider

react-routerrequiredpeer dependency for routing and transition methods

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/randallknutson/redux-view ↗

packagehttps://www.npmjs.com/package/redux-view ↗