Last active
August 2, 2019 19:24
-
-
Save cdbattags/48a5a8f3f0a4a27f7e97a03e62d74f2e to your computer and use it in GitHub Desktop.
Angular 1.x with Redux
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import angular from 'angular'; | |
import uiRouter from 'angular-ui-router'; | |
import ngRedux from 'ng-redux'; | |
import AppComponent from './app.component'; | |
import NavigationComponent from './components/navigation/navigation'; | |
import HomeComponent from './containers/home/home'; | |
// import the root reducer from reducers folder | |
import { RootReducer } from './reducers'; | |
// import our default styles for the whole application | |
import 'normalize.css'; | |
import 'bootstrap/dist/css/bootstrap.css'; | |
angular | |
.module('app', [ | |
uiRouter, | |
ngRedux, | |
NavigationComponent.name, | |
HomeComponent.name | |
]) | |
.config(($locationProvider, $stateProvider, $urlRouterProvider, $ngReduxProvider) => { | |
"ngInject"; | |
// Define our app routing, we will keep our layout inside the app component | |
// The layout route will be abstract and it will hold all of our app views | |
$stateProvider | |
.state('app', { | |
url: '', | |
abstract: true, | |
template: '<app></app>' | |
}) | |
// Dashboard page to contain our goats list page | |
.state('app.home', { | |
url: '/home', | |
template: '<home></home>' | |
}); | |
$urlRouterProvider.otherwise('/home'); | |
// create the root store using ng-redux | |
$ngReduxProvider.createStoreWith(RootReducer); | |
}) | |
.component('app', AppComponent); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import myStore from '../shared/store'; // initial store setup using plain Redux | |
function storeProviderEnhancer() { | |
return () => myStore; | |
} | |
// ... in AngularJS | |
$ngReduxProvider.createStoreWith(state => state, [], [storeProviderEnhancer]); | |
// ... in Angular using angular-redux/store | |
this.ngRedux.provideStore(store as Store<IAppState>); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// or using ES6 arrow functions | |
const middleware = store => next => action => { | |
next(action); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment