How to import redux to angularjs 1.x app?

Question

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?

Have you tried the answer here: https://stackoverflow.com/questions/36545920/uncaught-typeerror-cannot-read-property-combinereducers-of-undefined? — Aastha Bist, Aug 17 '22 at 17:32
@AasthaBist yes i tried installing the scripts in the project folder but that didn;t work as well, same error. And I also added the redux library but nothing changed. seems like something with the syntax not being recognized because I also got sometimes that `require is not defined` — HII, Aug 17 '22 at 17:37
https://stackoverflow.com/questions/23603514/javascript-require-function-giving-referenceerror-require-is-not-defined - Is this related to your error? — Aastha Bist, Aug 17 '22 at 17:40
it would be weird if it is the cause of the error, as ngRedux and redux (should?) be loaded in the angular app like any other scripts, so why would they contain code that's not compatible to run in a browser? My question is how can I properly import redux and ngRedux to my app? — HII, Aug 17 '22 at 17:48

HII · Accepted Answer · 2022-08-18T07:22:23.447

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.

How to import redux to angularjs 1.x app?

1 Answers1