Purpose of this demo is to understand redux easily. You can find step by step guide here to understand this demo properly.
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(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Now, we need to create two files :
- action/index.js
export const tabClicked = (activeTab) => ({
type: 'tabClicked',
activeTab: activeTab
});
- 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);
import { tabClicked } from './../../actions';
class uplicateTabComponent extends Component {
render() {
return (
<div>
</div>
);
}
}
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.
<a className={"nav-item nav-link" + (this.props.activeTab === 1 ? ' active' : '')} id="nav-tab1-tab" data-toggle="tab" href="#nav-tab1" role="tab" aria-controls="nav-tab1" aria-selected="true" onClick={() => this.props.tabClicked(1)}>Tab 1</a>
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.
Checkout full blog here