React Redux – Intro Reducer

Step 1 : Install dependency ” npm install –save redux ”

import React from "react";
import { createStore } from "redux"
import { Provider } from "react-redux"
import HomeScreen from "./screens/HomeScreen"

const reducer () => {}

const database = createStore(reducer)

const App = () => (
	<Provider store={database}>
		<HomeScreen />
	</Provider>
)

Step 2 : Create Store and Export it

import * as redux from 'redux';

//Actions
export const COUNTER_INCREMENT = 'counter/increment';
export const COUNTER_DECREMENT = 'counter/decrement';

const initialState = {
  count: 0
}

const reducer = (state = initialState, action) => {
  switch(action.type){
    case COUNTER_INCREMENT : {
      return { ...state, count: state.count + 1};
      break;
    }
    case COUNTER_DECREMENT : {
      return { ...state, count: state.count - 1};
      break;
    }
    default: {
      return state;
    }
  }
}

const store = redux.createStore(reducer);
export default store;

Step 3 : Import the store and dispatch the action from component : index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import store, {COUNTER_INCREMENT, COUNTER_DECREMENT} from './store';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  increment = () => {
    store.dispatch({type: COUNTER_INCREMENT});
    console.log(store.getState().count)
  }

  decrement = () =>{
    store.dispatch({type: COUNTER_DECREMENT});
    console.log(store.getState().count);
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Reference

Stackbliz