redux-view

0.2.1 verified Fri May 01 auth: no javascript deprecated

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.

Common errors

error Class extends value undefined is not a constructor or null ↓

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

fix

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

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

cause Package not installed or typo in import path.

fix

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

error Cannot read property 'transitionTo' of undefined ↓

cause 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.

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

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

fix

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

Warnings

deprecated redux-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).

breaking react-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.

gotcha initialize 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.

deprecated Library 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).

breaking The 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.

Install

npm install redux-view

yarn add redux-view

pnpm add redux-view

Imports

default (ReduxView)
wrong
```
const ReduxView = require('redux-view').default
```
correct
```
import ReduxView from 'redux-view'
```
Library provides a default export; require with .default only needed if mixing CJS.

ReduxView class

wrong

class MyView extends ReduxView.default { ... }

correct

class MyView extends ReduxView { ... }

Default export is the class itself.

initialize method

wrong

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

correct

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

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

Quickstart

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'));