useSelector & useDispatch Hooks

import React from 'react';
import { useSelector } from 'react-redux;
export default function usernameComponent(){
const firstName = useSelector(state => state.firstName)
const lastName = useSelector(state => state.lastName)
return (
<>
<div>{firstName}</div>
<div>{lastName}</div>
</>
)
}
let initialState = {
firstName = ''
lastName = ''
} //this will configure the initial state to nothing, which means we need to build a reducer so we can change it using our hooks.
export const nameReducer(state, action) {
switch(action.type) {
case: 'SET_FIRST_NAME' :
return {
firstName: action.payload
}
case: 'SET_LAST_NAME' :
return {
lastName: action.payload
}
default:
return state
}
import React from 'react';
import { useSelector } from 'react-redux;
export default function usernameComponent(){
const firstName = useSelector(state => state.firstName)
const lastName = useSelector(state => state.lastName)

const dispatch = useDispatch()
return (
<>
<div>{firstName}</div>
<div>{lastName}</div>
<button onClick={dispatch({type: 'SET_FIRST_NAME', payload: "John"})}</button> <button onClick={dispatch({type: 'SET_LAST_NAME', payload: "Doe"})}</button>
</>
)
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store