useReducer in React Native

useReducer in React Native

import React, { useReducer, useState , } from 'react'
import { View, Text, Button } from 'react-native'

const initialState = {
    count: 0
}
const Home = (state, actions) => {
    switch (actions.type) {
        case 'INCREMENT':
            return {
                count: state.count + 1
            }
        default:
            throw new Error()
    }
}

.................................................................................................................................................................................................................................



const App = () => {

    const [ state, dispatch]=useReducer(Home, initialState)


    const Increment=()=>dispatch({type:'INCREMENT'})
    return(

        <>
            <Text style={{fontSize:50}}>{state.count}</Text>
            <Button title='Increment' onPress={Increment}></Button>
        </>
    )
}


export default App


.................................................................................................................................................................................................................
Example 02

import React, { useReducer } from 'react'

const initialState = {
  count: 0
}
const appReducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return {
        ...state, 
      count: state.count +1
      }

    default:
      throw new Error()
  }
}

const App = () => {
  const [state, dispatch] = useReducer(appReducer, initialState)
  return (
    <>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: 'ADD' })}>Increment</button>
      
    </>
  )
}
export default App




.................................................................................................................................................................................................................................

................................................................................................................................................................................................................................
Example 2





import React, { useReducer } from 'react'

const appReducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [
        ...state,
        {
          id: Date.now(),
          text: 'Sapan Kumar Das',
          completed: false
        }
      ]
  }
}


const App = () => {
  const [state, dispatch] = useReducer(appReducer, [])
  return (
    <>
      <button onClick={() => dispatch({ type: 'ADD' })}> Add Todo</button>

      {state.map(item => (

        <div key={item.id}>

          {item.id}

          {item.text}
        </div>
      ))}

    </>
  )
}


export default App
....................................................................................................................................................................................................................................



import React, { useReducer } from 'react'

const Home = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [
        ...state,
        {
          id: Date.now(),
          text: 'Sapan',
          completed: false
        }
      ]
    default:
      return state
  }
}

const ToDOList=({items})=>{
  return(
    items.map(item=><div key={item.id}>{item.id}</div>)

  )
}

const App = () => {
  const [state, dispatch] = useReducer(Home, [])
  return (
    <>
    <button onClick={()=>dispatch({type:'ADD'})}>ADD</button>
    <ToDOList items={state}/>
    </>
    
  )
}
export default App
.....................................................................................................................................................................................................

import React, { useReducer } from 'react'


const Home = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [
        ...state,
        {
          id: Date.now(),
          text: 'Sapan Kumar Das',
          completed: false,
        }
      ]
    default:
      return state
  }

}

const TodoList = ({ items }) => {
  return (
    items.map(item => <TodoItem key={item.id}{...item}></TodoItem>

    ))
}

const TodoItem = ({ id }) => {
  return (
    <div>{id}</div>


  )
}

const App = () => {
  const [state, dispatch] = useReducer(Home, [])
  return (
    <>
      <button onClick={() => dispatch({ type: 'ADD' })}> Add</button>
      <TodoList items={state} />
    </>

  )
}

export default App