Search code examples
angularjsredux

How to import redux to angularjs 1.x app?

I was trying to use redux in an angular 1.x app. I added the scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js"></script>
<script src="https://unpkg.com/ng-redux/umd/ng-redux.min.js"></script>

to my html head. Then I created a file just to test if things are working correctly:

angular.module("app", ["ngRedux"]).config(function ($ngReduxProvider) {
  $ngReduxProvider.createStoreWith(
    {
      counterStateReducer: function (state, action) {},
    },
    []
  );
});

But when I run I get an error:

TypeError: Cannot read properties of undefined (reading 'combineReducers')
    at Object.$get (ngRedux.js:92:18)
    at Object.invoke (angular.js:5208:19)
...(other lines ommited by me)

I know that the error is from the file ngRedux.js specifically at this line _reducer = combineReducers(reducersObj); but I am new to JS and the docs don't say how to import this library other than by adding the scripts, so how can I fix it?

Solution

  • Turns out the dependencies scripts were wrong, these ones worked for me:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- Redux -->
<script src="https://unpkg.com/redux@latest/dist/redux.js"></script>
<!-- NgRedux -->
<script src="https://unpkg.com/ng-redux/umd/ng-redux.js"></script>

    I got them from the examples page on the official github repos of ngRedux and redux.

    Note: you may also need to declare type=module on these scripts if you get that import is not defined.