React + Redux Basic Example For Beginers

#Types.js file:

export const SAVE_MOBILE_NUMBER = 'save_mobile_number';


#Action.js file:


import {
    SAVE_MOBILE_NUMBER
} from './Types';

export const save_Mobile_No = (value) => {

    return (dispatch) => {

        dispatch({
            type: SAVE_MOBILE_NUMBER,
            payload: value
        });
    };
}



#Reducer.js file:
import {
  SAVE_MOBILE_NUMBER,
} from './Types';

const INITIAL_STATE = {
  Details: {
    mobNo: '',
  }
};

export default (state = INITIAL_STATE, action) => {

  switch (action.type) {

    case SAVE_MOBILE_NUMBER:
    return {
              ...state, Details: {
                ...state.Details,
                mobNo:action.payload
              }
            }
}


#components:

import {
    Save_Mob_Number
} from '../Action';

class Screen1 extends Component {
    contactSubmit(e) {
        e.preventDefault();
       this.props.history.push('/Screen2')
    }

    render() {
        return (
            <div >
<Input
 onChange={(e) => {
                                       this.props.Save_Mob_Number(e.target.value);
                                         }
                                       } />               
            </div >
        )
    }
}
const mapStateToProps = ({ userManagementReducer }) => {
    const { Details} = userManagementReducer;


    return { Details };
};

export default connect(mapStateToProps, {
  Save_Mob_Number
})(Screen1);



#index.js:

import ReduxThunk from 'redux-thunk';
import logger from 'redux-logger';

import Reducer from './Reducer';

let store=createStore(Reducer, {}, applyMiddleware(ReduxThunk, logger));
ReactDOM.render(
  <Provider store={store}>
     {/* root component starts here */}
      <HashRouter >
        <Switch>
          <Route exact path='/' component={Full} /> 
          <Full />
        </Switch>
      </HashRouter>

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