Redux - React Example

Here is a small example of react and Redux apppcation. You can also try developing small apps. Sample code for increase or decrease counter is given below −

This is the root file which is responsible for the creation of store and rendering our react app component.

/src/index.js

import React from  react 
import { render } from  react-dom 
import { Provider } from  react-redux 
import { createStore } from  redux ;
import reducer from  ../src/reducer/index 
import App from  ../src/App 
import  ./index.css ;

const store = createStore(
   reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && 
   window.__REDUX_DEVTOOLS_EXTENSION__()
)
render(
   <Provider store = {store}>
      <App />
   </Provider>, document.getElementById( root )
)

This is our root component of react. It is responsible for rendering counter container component as a child.

/src/app.js

import React, { Component } from  react ;
import  ./App.css ;
import Counter from  ../src/container/appContainer ;

class App extends Component {
   render() {
      return (
         <span className = "App">
            <header className = "App-header">
               <Counter/>
            </header>
         </span>
      );
   }
}
export default App;

The following is the container component which is responsible for providing Redux’s state to react component −

/container/counterContainer.js

import { connect } from  react-redux 
import Counter from  ../component/counter 
import { increment, decrement, reset } from  ../actions ;

const mapStateToProps = (state) => {
   return {
      counter: state
   };
};
const mapDispatchToProps = (dispatch) => {
   return {
      increment: () => dispatch(increment()),
      decrement: () => dispatch(decrement()),
      reset: () => dispatch(reset())
   };
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Given below is the react component responsible for view part −

/component/counter.js
import React, { Component } from  react ;
class Counter extends Component {
   render() {
      const {counter,increment,decrement,reset} = this.props;
      return (
         <span className = "App">
            <span>{counter}</span>
            <span>
               <button onCpck = {increment}>INCREMENT BY 1</button>
            </span>
            <span>
               <button onCpck = {decrement}>DECREMENT BY 1</button>
            </span>
            <button onCpck = {reset}>RESET</button>
         </span>
      );
   }
}
export default Counter;

The following are the action creators responsible for creating an action −

/actions/index.js
export function increment() {
   return {
      type:  INCREMENT 
   }
}
export function decrement() {
   return {
      type:  DECREMENT 
   }
}
export function reset() {
   return { type:  RESET  }
}

Below, we have shown pne of code for reducer file which is responsible for updating the state in Redux.

reducer/index.js
const reducer = (state = 0, action) => {
   switch (action.type) {
      case  INCREMENT : return state + 1
      case  DECREMENT : return state - 1
      case  RESET  : return 0 default: return state
   }
}
export default reducer;

Initially, the app looks as follows −

When I cpck increment two times, the output screen will be as shown below −

When we decrement it once, it shows the following screen −

And reset will take the app back to initial state which is counter value 0. This is shown below −

Let us understand what happens with Redux dev tools when the first increment action takes place −

State of the app will be moved to the time when only increment action is dispatched and rest of the actions are skipped.

We encourage to develop a small Todo App as an assignment by yourself and understand the Redux tool better.