https://github.com/logisticinfotech/easiest-demo-redux-reactjs

Easiest demo of redux in reacjs with little ui state management
https://github.com/logisticinfotech/easiest-demo-redux-reactjs

demo demo-app html react-redux react-redux-demo reactjs redux tutorial

Last synced: 7 days ago
JSON representation

Easiest demo of redux in reacjs with little ui state management

• Host: GitHub
• URL: https://github.com/logisticinfotech/easiest-demo-redux-reactjs
• Owner: logisticinfotech
• Created: 2018-08-16T17:40:36.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-22T11:55:23.000Z (over 6 years ago)
• Last Synced: 2024-11-08T22:22:19.188Z (2 months ago)
• Topics: demo, demo-app, html, react-redux, react-redux-demo, reactjs, redux, tutorial
• Language: JavaScript
• Homepage: https://www.logisticinfotech.com/blog/easiest-demo-to-learn-redux-in-reactjs-with-code-example/
• Size: 85 KB
• Stars: 4
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Easiest React Redux Demo with little UI state managment like tab, input, select, checkbox, radio

Purpose of this demo is to understand redux easily. You can find step by step guide [here](https://www.logisticinfotech.com/blog/easiest-demo-to-learn-redux-in-reactjs-with-code-example/) to understand this demo properly.

## React Redux configuration

First install `react-redux`

```

npm install react-redux --save

```

Now, you need to define provider and store in index.js

```

import { Provider } from 'react-redux';

import { store } from './reducers';

ReactDOM.render(

    

        

    ,

    document.getElementById('root')

);

```

Now, we need to create two files :

1) action/index.js

```

export const tabClicked = (activeTab) => ({

    type: 'tabClicked',

    activeTab: activeTab

});

```

2) reducers/index.js

```

import { combineReducers, createStore } from 'redux';

// Initial State

const initialState = {

    activeTab: 1

}

// reducers part

export const actionReducer = (state = initialState, action) => {

    switch (action.type) {

        case 'tabClicked':

            return {

                ...state,

                activeTab: action.activeTab

            }

        default:

            return state;

    }

};

export const reducers = combineReducers({

    actionReducer

});

// store part

export const store = createStore(reducers);

```

## How to use in component

```

import { tabClicked } from './../../actions';

class uplicateTabComponent extends Component {

    render() {

        return (

            


            

        );

    }

}


function mapStateToProps(state) {

    return {

        activeTab: state.actionReducer.activeTab,

    }

}

const mapDispatchToProps = {

    tabClicked

};

const TabContainer = connect(

    mapStateToProps,

    mapDispatchToProps

)(TabComponent);

```

We can use props and event in html. You just need to put html in redner function in component.

```

 this.props.tabClicked(1)}>Tab 1

```

## Development server

Run `npm start` for a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.

## Further help

Checkout full blog [here](https://www.logisticinfotech.com/blog/easiest-demo-to-learn-redux-in-reactjs-with-code-example/)