React-Redux example with counter and Object Type ?

sandeep negi's photo
sandeep negi
·

4 min read

Thank you for reading so today we will be doing react redux with counter and object type

Steps:

  1. install redux
  2. create folder for reducers
  3. create folder for actions
  4. Create your first reducer

here we have our counter reducer with initial state as 5 and action type we have defined as increment and decrement,

so what will happened here is initial counter value is 5 we will display 5 and then we will create a button once the button is clicked the global state should change and the increment should increase it should increase by the payload we will send

const counterReducer = (state = 5, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload

    case 'DECREMENT':
      return state - 1

    default:
      return state
  }
}

export default counterReducer
  1. once this is done we will create our action where we will mention the type of the action as well as the payload
export const increment = (incrementcount) => {
  return {
    type: 'INCREMENT',
    payload: incrementcount,
  }
}

export const decrement = () => {
  return {
    type: 'DECREMENT',
  }
}
  1. once this is done we will create a store with the reducer and if we have many reducers we will combine all the reducers like this

here we have combines all our reducers since in the store we can only send single reducer.

import counterReducer from './counter'
import isLogged from './isLogged'
import milestonesReducer from './milestones'

import { combineReducers } from 'redux'

const allReducers = combineReducers({
  counter: counterReducer,
  logged: isLogged,
  milestones: milestonesReducer,
})

export default allReducers
  1. Lets see what needs to be done in the index.js here we need to create a store and then send the store to the app component by wrapping it in the Provider and then sending the store now we can use the state in any of the component.

import { createStore } from 'redux'

import allReducers from './reducers'

import { Provider } from 'react-redux'

const store = createStore(
  allReducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

reportWebVitals()
  1. Lets see how we can use the state in app component.

here we have import the actions. and then useSelector to select the state and then use the dispatch to call the actions . here you can see some more code for one more reducer i will add the details of that reducer down below


import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { increment } from './actions'
import { decrement } from './actions'
import { addMilestone } from './actions'

const App = () => {
  const counter = useSelector((state) => state.counter)
  const dispatch = useDispatch()
  const milestonesParent = useSelector((state) => state.milestones)

  return (
    <div>
      <h1>Counter {counter} </h1>

      <button onClick={() => dispatch(increment(5))}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>

      <h1>
        This is App component with milestones global state:{' '}
        {milestonesParent.milestones.length}
      </h1>

      <button
        onClick={() =>
          dispatch(
            addMilestone({
              name: 'latestmilestone',
              description: 'this is latest milestone',
              amount: '45',
            })
          )
        }
      >
        Add milestones
      </button>

      <h3>
        {milestonesParent.milestones.map((item) => (
          <p>{item.name}</p>
        ))}
      </h3>
    </div>
  )
}

export default App
  1. milestone reducer and action file

here we have a initial milestone with some values and on click of add milestone we will be adding object to that using object assign let see the action file now

const initialMilestone = {
  milestones: [
    {
      name: 'milestone1',
      description: 'this is description',
      amount: '1',
    },

    {
      name: 'milestone2',
      description: 'this is description',
      amount: '1',
    },
    {
      name: 'milestone3',
      description: 'this is description',
      amount: '1',
    },
  ],
}
const milestoneReducer = (state = initialMilestone, action) => {
  switch (action.type) {
    case 'ADDMILESTONE':
      return Object.assign({}, state, {
        milestones: [...state.milestones, action.payload],
      })

    default:
      return state
  }
}

export default milestoneReducer
  1. milestone action code

here we have addMilestone and then the payload that we will submit once the button is clicked we will be adding that to the milestone

export const addMilestone = (milestoneObject) => {
  return {
    type: 'ADDMILESTONE',
    payload: milestoneObject,
  }
}
React