react redux1

desktop/javascript2/react/project

 step 1:-

I.create a folder name action inside component

II.create index.js file where will define actions:

export const Increment=()=>{

    return {

      type:'Increment'

    }

  }

  export const Decrement=()=>{

    return {

      type:'Decrement'

    }

  }

step2:

A.create a reducer folder inside component folder

B.create all the reducers inside it like reducer.js reducer1.js.......

// const initialState={

//     count:0,

//     info:'Redux action'

//    };

const initialState=0;

const reducer=function(state=initialState,action){

    switch(action.type){

      case  'Increment':return state+1;

          //{

              //  ...state,

              //  count:state.count+1

            //   }

      case 'Decrement': return state-1;

        /*{

               ...state,

              count:state.count-1

              }*/

      default: return state;

        }

}

export default reducer;

C:

one index.js  file inside reducers folder  where all the reducer has to pass

//only one root reducer all has to pass

//here

import reducer from "./Reducer";

import { combineReducers } from "redux";

const rootReducer=combineReducers({

    reducer,

    //all reducer should added here..

});

export default rootReducer;

step 3:

store.js file  inside component folder

import { createStore } from "redux";

import rootReducer from "./reducers/index";

const store=createStore(rootReducer,

    window.__REDUX_DEVTOOLS_EXTENSION__ 

&& window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

step 4:

inside  index.js file all the app component set one state

provider it connects all global state from store to entire app.

import store from "./Components/store";

import { Provider } from 'react-redux';

store.subscribe(()=>console.log(store.getState()))

and :--

ReactDOM.render(

  <>

    <Provider store={store}>

    <App />

    </Provider>

  </>,

step 5:

app.js file:

import React from 'react';

import { useSelector,useDispatch } 

from 'react-redux';

import { Decrement, Increment } 

from './Components/actions';

function App() {

  const state1=useSelector

((state)=>state.reducer);

const dispatch=useDispatch();

  return (

    <div className="App">

    

<span onClick=

{()=>dispatch(Decrement())}>-</span>

<input type="text" name="value" value={state1}

onChange={(e)=>e.target.value}

/>

<span onClick=

{()=>dispatch(Increment())}>+</span>

    </div>

  );

}

export default App;