14 |
16 | )
17 | }
18 | }
19 |
20 | const mapStateToProps = (state) => {
21 | return {
22 | authReducer: state.UserReducer
23 | }
24 | }
25 |
26 | export default connect(mapStateToProps, null)(HomeContainer)
27 |
28 |
--------------------------------------------------------------------------------
/react native/navigation with firebase/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "navigation",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "start": "node node_modules/react-native/local-cli/cli.js start",
7 | "test": "jest"
8 | },
9 | "dependencies": {
10 | "firebase": "^4.11.0",
11 | "native-base": "^2.3.10",
12 | "react": "16.3.0-alpha.1",
13 | "react-native": "0.54.2",
14 | "react-navigation": "^1.5.8"
15 | },
16 | "devDependencies": {
17 | "babel-jest": "23.0.0-alpha.0",
18 | "babel-preset-react-native": "4.0.0",
19 | "jest": "22.4.2",
20 | "react-test-renderer": "16.3.0-alpha.1"
21 | },
22 | "jest": {
23 | "preset": "react-native"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/redux/Redux React 1 (improve structure)/src/reducers/userReducer.js:
--------------------------------------------------------------------------------
1 | var obj = {
2 | name: "Majid ",
3 | age: 24
4 | }
5 | const UserReducer = (state = obj, action) => {
6 | switch (action.type) {
7 | case "SET_NAME":
8 | state = {
9 | // name: state.name + action.value,
10 | name: action.value,
11 | age: state.age
12 | }
13 | break;
14 | case "SET_AGE":
15 | state = {
16 | name: state.name,
17 | age: action.value
18 | }
19 | break;
20 | default:
21 | return state
22 | }
23 | return state
24 | }
25 | export default UserReducer
--------------------------------------------------------------------------------
/redux/Redux React Auth (10)/src/container/home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux'
3 |
4 | import { HomeComponent } from '../components/home';
5 |
6 | class HomeContainer extends React.Component {
7 | // constructor(props) {
8 | // super(props);
9 | // }
10 | render() {
11 | console.log("Home", this.props.authReducer)
12 | return (
13 |
14 |
16 | )
17 | }
18 | }
19 |
20 | const mapStateToProps = (state) => {
21 | return {
22 | authReducer: state.UserReducer
23 | }
24 | }
25 |
26 | export default connect(mapStateToProps, null)(HomeContainer)
27 |
28 |
--------------------------------------------------------------------------------
/firebase with js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/ReactJS/todo with firebase/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 | import firebase from 'firebase';
7 |
8 | // Initialize Firebase
9 | var config = {
10 | apiKey: "AIzaSyCuhF5q-M1gKl-YLkmfapXOOqVBHPvfuV0",
11 | authDomain: "fir-adf99.firebaseapp.com",
12 | databaseURL: "https://fir-adf99.firebaseio.com",
13 | projectId: "fir-adf99",
14 | storageBucket: "fir-adf99.appspot.com",
15 | messagingSenderId: "862999688485"
16 | };
17 | firebase.initializeApp(config);
18 |
19 | ReactDOM.render(
14 |
18 | );
19 | }
20 | }
21 |
22 | ReactDOM.render(Hi reactsst
*/} 17 |
26 |
28 | );
29 | }
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/react native/cameraRoll/ios/navigationTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 | Home
13 | Login
14 | Contact 15 | 16 |
20 | 13 | Login
14 | Contact 15 | 16 |
20 |
21 | 
22 |
24 |
25 |
26 |
27 |
31 | );
32 | }
33 | }
34 |
35 | export default App;
36 |
--------------------------------------------------------------------------------
/redux/redux js 3/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redux_sample",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "author": "Majid Ashraf",
7 | "license": "ISC",
8 | "scripts": {
9 | "start": "node ./node_modules/webpack/bin/webpack.js -w"
10 | },
11 | "babel": {
12 | "plugins": [
13 | "transform-react-jsx"
14 | ],
15 | "presets": [
16 | "es2015"
17 | ],
18 | "ignore": [
19 | "js/bundle.js",
20 | "node_modules/**/*.js"
21 | ]
22 | },
23 | "dependencies": {
24 | "babel-core": "6.3.21",
25 | "babel-loader": "6.2.0",
26 | "babel-plugin-transform-react-jsx": "6.3.13",
27 | "babel-preset-es2015": "6.3.13",
28 | "react": "15.3.1",
29 | "react-dom": "15.3.1",
30 | "react-router": "^2.8.0",
31 | "redux": "^3.6.0",
32 | "redux-logger": "^2.8.1",
33 | "redux-thunk": "^2.2.0",
34 | "webpack": "1.13.1",
35 | "webpack-dev-server": "1.14.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/redux/redux js 4/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redux_sample",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "author": "Majid Ashraf",
7 | "license": "ISC",
8 | "scripts": {
9 | "start": "node ./node_modules/webpack/bin/webpack.js -w"
10 | },
11 | "babel": {
12 | "plugins": [
13 | "transform-react-jsx"
14 | ],
15 | "presets": [
16 | "es2015"
17 | ],
18 | "ignore": [
19 | "js/bundle.js",
20 | "node_modules/**/*.js"
21 | ]
22 | },
23 | "dependencies": {
24 | "babel-core": "6.3.21",
25 | "babel-loader": "6.2.0",
26 | "babel-plugin-transform-react-jsx": "6.3.13",
27 | "babel-preset-es2015": "6.3.13",
28 | "react": "15.3.1",
29 | "react-dom": "15.3.1",
30 | "react-router": "^2.8.0",
31 | "redux": "^3.6.0",
32 | "redux-logger": "^2.8.1",
33 | "redux-thunk": "^2.2.0",
34 | "webpack": "1.13.1",
35 | "webpack-dev-server": "1.14.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/ReactJS/routing firebase auth (9)/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | BrowserRouter as Router,
4 | Route
5 | } from 'react-router-dom';
6 |
7 | import { HomeComponent } from './components/home'
8 | import { ContactComponent } from './components/contact'
9 | import { GallaryComponent } from './components/gallary'
10 | import { SignupComponent } from './components/signup'
11 | import { LoginComponent } from './components/login'
12 |
13 |
14 | const BasicRouting = () => {
15 | return (
16 | Welcome to React
23 |28 | Hello world 29 |
30 |
18 |
25 |
15 |
17 | );
18 | }
19 | }
20 |
21 |
22 | const mapStateToProps = (state) => {
23 | return {
24 | authReducer: state.UserReducer
25 | }
26 | }
27 |
28 | const mapDispatchToProps = (dispatch) => {
29 | return {
30 | myLogin: (name) => { // send name as a param
31 | dispatch(login(name)) // send name as a param
32 | }
33 | }
34 | }
35 |
36 | export default connect(mapStateToProps, mapDispatchToProps)(App);
--------------------------------------------------------------------------------
/ReactJS/export import classes/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from './logo.svg';
3 | import './App.css';
4 |
5 |
6 | export class HomeComponent extends Component {
7 | constructor(prop){
8 | super(prop)
9 | // console.log(prop)
10 | console.log(this.props)
11 |
12 | }
13 | render() {
14 | return {this.props.data} Compoent
15 | } 16 | } 17 | export class AboutComponent extends Component { 18 | render() { 19 | returnAbout Compoent Render Here
20 | } 21 | } 22 | 23 | 24 | class Apps extends Component { 25 | render() { 26 | return ( 27 |
28 |
29 | {/* */}
30 |
32 |
36 | );
37 | }
38 | }
39 |
40 | export default Apps;
41 |
--------------------------------------------------------------------------------
/redux/Redux React Auth (10)/src/config/routing.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
3 | import App from '../container/login'
4 | import SignupContainer from '../container/signup'
5 | import HomeContainer from '../container/home'
6 | import { ContactContainer } from '../container/contact'
7 |
8 | export default class Routing extends Component {
9 | render() {
10 | return (
11 | Welcome to React
31 |
33 | To get started, edit src/App.js and save to reload.
34 |
13 | Home
14 | Login
15 | Aignup
16 | Contact 17 | 18 |
23 | 14 | Login
15 | Aignup
16 | Contact 17 | 18 |
14 |
21 | );
22 | }
23 | }
24 |
25 |
26 | const mapStateToProps = (state) => {
27 | return {
28 | userData : state.user
29 | }
30 | }
31 |
32 | const mapDispatchToProps = (dispatch) => {
33 | return {
34 | setName: (name) => {
35 | dispatch({
36 | type: "SET_NAME",
37 | value: name
38 | })
39 | }
40 | }
41 | }
42 |
43 | export default connect(mapStateToProps, mapDispatchToProps)(App);
--------------------------------------------------------------------------------
/ReactJS/000Basic/js/app.js:
--------------------------------------------------------------------------------
1 | // ReactDOM.render(
2 | // React.DOM.h1({ id: "my-heading" }, React.DOM.span(null, React.DOM.em(
3 | // { style: { color: 'red' } },
4 | // "Hello"))),
5 | // // React.createElement('h1', {title: 'hello world'}, 'Hello World'),
6 | // document.getElementById('root')
7 | // );
8 |
9 | class ABCComponent extends React.Component {
10 | constructor(props) {
11 | super(props)
12 | this.state = {
13 | name: props.name
14 | }
15 | }
16 | updated(ev){
17 | this.setState({name : ev.target.value})
18 | // console.log(ev.target.value)s
19 | }
20 | render() {
21 | return React.DOM.div(null,
22 | React.DOM.input({
23 | defaultValue: this.state.name,
24 | onChange : this.updated.bind(this)
25 | }),
26 | React.DOM.h3({style : {color : '#232323'}}, this.state.name)
27 | );
28 | }
29 | }
30 |
31 | ReactDOM.render(
32 | // React.DOM.div(ABCComponent),
33 | React.createElement(ABCComponent, { name: "John" }),
34 | document.getElementById('root')
35 | );
36 |
37 |
--------------------------------------------------------------------------------
/react native/cameraRoll/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
15 |
16 |
18 | Welcome to React
17 |{this.props.userData.name}
19 | 20 |
17 |
36 | );
37 | }
38 | }
39 |
40 | export default App;
41 |
--------------------------------------------------------------------------------
/ReactJS/routing firebase auth (9)/src/components/home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | export class HomeComponent extends Component {
5 | render() {
6 | return (
7 |
18 |
23 |
24 | Welcome to React
19 |
20 | To get started, edit src/App.js and save to reload.
21 |
25 |
26 |
27 |
28 |
29 |
30 |
32 |
33 |
35 |
8 |
24 |
25 |
26 | {/*
32 | );
33 | }
34 | }
35 |
36 |
--------------------------------------------------------------------------------
/redux/redux sample (9)/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 | Welcome to DASHboard
27 | 28 | Contact 29 | gallary */} 30 | 31 |
17 |
25 | );
26 | }
27 | }
28 |
29 |
30 | const mapStateToProps = (state) => {
31 | return {
32 | UserReducer: state.UserReducer
33 | }
34 | }
35 |
36 | const mapDispatchToProps = (dispatch) => {
37 | return {
38 | setNewName: (name) => { // send name as a param
39 | dispatch(setName(name)) // send name as a param
40 | }
41 | }
42 | }
43 |
44 | export default connect(mapStateToProps, mapDispatchToProps)(App);
--------------------------------------------------------------------------------
/ReactJS/routing firebase auth (9)/src/components/contact.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export class ContactComponent extends Component {
4 | render() {
5 | return (
6 |
18 |
19 |
21 | Welcome to React
20 |
7 |
32 | );
33 | }
34 | }
35 |
36 |
--------------------------------------------------------------------------------
/react native/cameraRoll/android/app/src/main/java/com/navigation/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.navigation;
2 |
3 | import android.app.Application;
4 |
5 | import com.facebook.react.ReactApplication;
6 | import cl.json.RNSharePackage;
7 | import com.RNFetchBlob.RNFetchBlobPackage;
8 | import com.facebook.react.ReactNativeHost;
9 | import com.facebook.react.ReactPackage;
10 | import com.facebook.react.shell.MainReactPackage;
11 | import com.facebook.soloader.SoLoader;
12 |
13 | import java.util.Arrays;
14 | import java.util.List;
15 |
16 | public class MainApplication extends Application implements ReactApplication {
17 |
18 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
19 | @Override
20 | public boolean getUseDeveloperSupport() {
21 | return BuildConfig.DEBUG;
22 | }
23 |
24 | @Override
25 | protected List
8 | This is a primary alert—check it out!
9 |
10 |
11 | This is a secondary alert—check it out!
12 |
13 |
14 | This is a success alert—check it out!
15 |
16 |
17 | This is a danger alert—check it out!
18 |
19 |
20 | This is a warning alert—check it out!
21 |
22 |
23 | This is a info alert—check it out!
24 |
25 |
26 | This is a light alert—check it out!
27 |
28 |
29 | This is a dark alert—check it out!
30 |
31 |
7 | //
16 | // );
17 | // }
18 | // }
19 |
20 | export const App = (prop) => {
21 | return (
22 |
23 |
8 | //
14 | //
15 | //
24 |
33 | )
34 | }
35 |
36 | // export default App
--------------------------------------------------------------------------------
/Authantication done with firebase/login/login.js:
--------------------------------------------------------------------------------
1 | var database = firebase.database().ref('/')
2 |
3 | var email = document.getElementById('inputEmail')
4 | var pass = document.getElementById('inputPassword')
5 |
6 | document.getElementById('stop')
7 | .addEventListener("submit", function (event) {
8 | event.preventDefault()
9 | var user = {
10 | email: email.value,
11 | password: pass.value
12 | }
13 |
14 | firebase.auth().signInWithEmailAndPassword(user.email, user.password)
15 | .then(function (res) {
16 | // console.log(res.uid)
17 | database.child('users/' + res.uid)
18 | .once('value', function (snapshot) {
19 | var convert = JSON.stringify(snapshot.val())
20 | localStorage.setItem('loggedInUser', convert)
21 | location = '../home/home.html'
22 | // console.log(convert)
23 | })
24 | })
25 | .catch(function (error) {
26 | // Handle Errors here.
27 | var errorCode = error.code;
28 | var errorMessage = error.message;
29 | if (errorCode === 'auth/wrong-password') {
30 | alert('Wrong password.');
31 | } else {
32 | alert(errorMessage);
33 | }
34 | console.log(error);
35 | });
36 |
37 | })
--------------------------------------------------------------------------------
/react native/navigation with firebase/App.js:
--------------------------------------------------------------------------------
1 | import { StackNavigator, TabNavigator } from 'react-navigation';
2 | import { LoginPage, Registration, HomePage, AboutPage, ContactPage } from './application/components';
3 | import * as firebase from 'firebase'
4 |
5 |
6 | // Initialize Firebase
7 | var config = {
8 | };
9 | firebase.initializeApp(config);
10 |
11 |
12 |
13 |
14 | const Routing = StackNavigator({
15 | login: {
16 | screen: LoginPage,
17 | },
18 | signup: {
19 | screen: Registration,
20 | navigationOptions: () => ({
21 | title: 'Register',
22 | headerStyle: {
23 | backgroundColor: '#232323',
24 | },
25 | headerTintColor: '#fff',
26 | headerTitleStyle: {
27 | fontWeight: 'bold',
28 | },
29 | })
30 | },
31 | Dashboard: {
32 | screen: TabNavigator({
33 | Home: {
34 | screen: HomePage,
35 | navigationOptions: () => ({
36 | title: "Main page"
37 | })
38 | },
39 | About: {
40 | screen: AboutPage
41 | },
42 | Contact: {
43 | screen: ContactPage
44 | },
45 | }),
46 | navigationOptions: () => ({
47 | header: null
48 | })
49 | }
50 | })
51 |
52 | export default Routing
53 |
54 |
55 |
56 |
57 |
58 |
59 | // export default TabNavigator({
60 | // Home: {
61 | // screen: HomePage
62 | // },
63 | // About: {
64 | // screen: AboutPage
65 | // },
66 | // contact: {
67 | // screen: ContactPage
68 | // },
69 | // })
70 |
71 |
--------------------------------------------------------------------------------
/react native/cameraRoll/App.js:
--------------------------------------------------------------------------------
1 | import { StackNavigator, TabNavigator } from 'react-navigation';
2 | import { LoginPage, Registration, GallaryPage, AboutPage, SocialShering } from './application/components';
3 | import * as firebase from 'firebase'
4 |
5 |
6 | // Initialize Firebase
7 | var config = {
8 | };
9 | firebase.initializeApp(config);
10 |
11 |
12 |
13 |
14 | const Routing = StackNavigator({
15 | login: {
16 | screen: LoginPage,
17 | },
18 | signup: {
19 | screen: Registration,
20 | navigationOptions: () => ({
21 | title: 'Register',
22 | headerStyle: {
23 | backgroundColor: '#232323',
24 | },
25 | headerTintColor: '#fff',
26 | headerTitleStyle: {
27 | fontWeight: 'bold',
28 | },
29 | })
30 | },
31 | Dashboard: {
32 | screen: TabNavigator({
33 | Gallary: {
34 | screen: GallaryPage,
35 | navigationOptions: () => ({
36 | title: "Camera Roll"
37 | })
38 | },
39 | About: {
40 | screen: AboutPage
41 | },
42 | SocialShering: {
43 | screen: SocialShering
44 | },
45 | }),
46 | navigationOptions: () => ({
47 | header: null
48 | })
49 | }
50 | })
51 |
52 | export default Routing
53 |
54 |
55 |
56 |
57 |
58 |
59 | // export default TabNavigator({
60 | // Home: {
61 | // screen: GallaryPage
62 | // },
63 | // About: {
64 | // screen: AboutPage
65 | // },
66 | // contact: {
67 | // screen: SocialShering
68 | // },
69 | // })
70 |
71 |
--------------------------------------------------------------------------------
/react native/cameraRoll/ios/navigation/AppDelegate.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import "AppDelegate.h"
11 |
12 | #import
25 |
31 |
32 |
9 |
11 | 30 | 31 | 32 | 33 |
34 |
35 | )
36 | }
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/react native/navigation with firebase/application/components/login.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { StyleSheet } from 'react-native';
3 |
4 | import { Container, Button, Text, Content, Form, Item, Input, Label } from 'native-base';
5 |
6 |
7 | export default class LoginPage extends Component {
8 | static navigationOptions = {
9 | title: 'Login',
10 | headerStyle: {
11 | backgroundColor: '#232323',
12 | },
13 | headerTintColor: '#aaa',
14 | headerTitleStyle: {
15 | fontWeight: 'bold',
16 | },
17 | };
18 | render() {
19 | return (
20 | LOGIN WITH YOUR CREDENTIALS
10 |11 | 30 | 31 | 32 | 33 |
34 |
33 |
34 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/Authantication done with firebase/login/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
33 |
34 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/Authantication with firebase/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
23 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/ES6/class 2/app.js:
--------------------------------------------------------------------------------
1 | // // var funcs = [];
2 | // // for (var i = 0; i < 10; i++) {
3 | // // funcs.push(function () {
4 | // // console.log(i);
5 | // // });
6 | // // }
7 | // // funcs.forEach(function (func) {
8 | // // func();
9 | // // });
10 |
11 |
12 | // // var funcs = [];
13 | // // for (var i = 0; i < 10; i++) {
14 | // // funcs.push((function (value) {
15 | // // return function () {
16 | // // console.log(value);
17 | // // }
18 | // // }(i)));
19 | // // }
20 | // // // console.log('value', value)
21 | // // // console.log(i)
22 | // // funcs.forEach(function (func) {
23 | // // func(); // outputs 0, then 1, then 2, up to 9
24 | // // });
25 |
26 |
27 |
28 | // // setTimeout(function() {
29 | // // console.log("Out side timer",i);
30 | // // }, 1000);
31 |
32 | // // for (var i = 0; i < 10; i++) {
33 | // // // process(items[i]);
34 | // // console.log(i);
35 | // // }
36 | // // // i is still accessible here
37 | // // console.log("Out side",i);
38 |
39 |
40 |
41 | // // var funcs = [];
42 | // // for (let i = 0; i < 10; i++) {
43 | // // funcs.push(function () {
44 | // // console.log(i);
45 | // // });
46 | // // }
47 | // // funcs.forEach(function (func) {
48 | // // func();
49 | // // });
50 |
51 |
52 |
53 | // // var funcs = [],
54 | // // object = {
55 | // // a: true,
56 | // // b: true,
57 | // // c: true
58 | // // };
59 | // // for (let key in object) {
60 | // // funcs.push(function () {
61 | // // console.log(key);
62 | // // });
63 | // // }
64 | // // funcs.forEach(function (func) {
65 | // // func(); // outputs "a", then "b", then "c"
66 | // // });
67 |
68 |
69 | // // const obj = {
70 | // // name : "demo",
71 | // // color : "red"
72 | // // }
73 | // // Object.freeze(obj)
74 | // // obj.name = "MAjid"
75 |
76 | // var name = "majid";
77 | // var add = "khi";
78 | // alert(`hello ${name} ${add} `)
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
--------------------------------------------------------------------------------
/redux/redux js 4/src/app.js:
--------------------------------------------------------------------------------
1 | // import { createStore, applyMiddleware } from 'redux'
2 | // import { reducer } from './reducers.js'
3 |
4 | // const logger = (store) => (next) => (action) => {
5 | // // console.log("AcTION", action)
6 | // next(action)
7 | // }
8 |
9 | // const middleware = applyMiddleware(logger)
10 |
11 | // const store = createStore(reducer, middleware)
12 |
13 | // store.subscribe(() => {
14 | // console.log("............", store.getState())
15 | // })
16 | // store.dispatch({
17 | // type: "ADD",
18 | // payload: 101
19 | // })
20 | // store.dispatch({
21 | // type: "ADD",
22 | // payload: 105
23 | // })
24 | // store.dispatch({
25 | // type: "REM",
26 | // value: 100
27 | // })
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | // STEP 1
38 |
39 | // import { createStore, applyMiddleware } from 'redux'
40 | // import logger from 'redux-logger'
41 | // import { reducer } from './reducers.js'
42 |
43 | // const middleware = applyMiddleware(logger())
44 |
45 | // const store = createStore(reducer, middleware)
46 |
47 | // // store.subscribe(() => { //now you dont need to subscribe
48 | // // console.log("............", store.getState())
49 | // // })
50 |
51 | // store.dispatch({
52 | // type: "ADD",
53 | // payload: 101
54 | // })
55 | // store.dispatch({
56 | // type: "ADD",
57 | // payload: 105
58 | // })
59 | // store.dispatch({
60 | // type: "ADD",
61 | // payload: 109
62 | // })
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 | // STEP 2
72 |
73 | import { createStore, combineReducers, applyMiddleware } from 'redux'
74 | import logger from 'redux-logger'
75 | import { reducer } from './reducers.js'
76 | import thunk from 'redux-thunk'
77 |
78 | const middleware = applyMiddleware(thunk, logger())
79 |
80 | const store = createStore(reducer, middleware)
81 |
82 |
83 | // store.dispatch({
84 | // type: "ADD",
85 | // value: 101
86 | // })
87 |
88 | store.dispatch((dispatcher) => {
89 | dispatcher({ type: "ADD", payload: 101 })
90 | // do something asyn
91 | dispatcher({ type: "ADD", payload: 201 })
92 | // dispatcher({})
93 | })
94 |
--------------------------------------------------------------------------------
24 |
25 |
42 |
26 |
41 |
27 | User Name
28 |
29 |
30 |
31 | abc@Example.com
32 |
33 |
34 |
35 | password
36 |
37 |
38 |
39 |
40 |