1)Redux Introduction:

===================

What about React State ?

"I thought React already had state, why do i need a separate" tool to do it ?" -you

--> How to handle state that your whole application needs.

--> Lack of organization and clarity.

Guidelines principals

--> A single source of truth("global state")

--> State is read-only("actions")
--> Changes are made with pure functions("reducers")

Fundamentals:
==============
1) Actions & action creators
2) Dispatch
3) Reducers
4) Store

2)Plain JS Redux - Overview:

============================
[email protected] package

index.js:
=========

const redux = require("redux")

const initialState = {
count: 0
}

function reducer(state=initialState, action) {

switch(action.type) {
case "INCREMENT":
return {
count: state.count + 1
}
case "DECREMENT":
return {
count: state.count - 1
}
default:
return state
}
}

const store = redux.createStore(reducer)

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

store.dispatch({type: "INCREMENT"})
store.dispatch({type: "INCREMENT"})
store.dispatch({type: "DECREMENT"})

3)Plain JS Redux - Actions:

===========================

index.js:
=========
const redux = require("redux")

const action = {
type: "INCREMENT"
}

4)Plain JS Redux - Action Creators:

===================================
const redux = require("redux")

function increment() {
return {
type: "INCREMENT"
}
}

console.log(increment())

5)Plain JS Redux - Reducer:

===========================

index.js:
=========
const redux = require("redux")

function increment() {
return {
type: "INCREMENT"
}
}

function decrement() {
return {
type: "DECREMENT"
}
}

function reducer(state = {count: 0}, action) {

// return new state based on the incoming action.type
switch(action.type) {
case "INCREMENT":
return {
count: state.count + 1
}
case "DECREMENT":
return {
count: state.count - 1
}
default:
return state
}
}

6)Plain JS Redux Practice 1:

============================

/**
* Challenge:
*
* Enable the ability to double and halve the count.
* If halving, round down instead of letting your count
* become a decimal.
*/

index.js:
=========
/**
* Challenge:
*
* Do it again, from scratch!
*
* 1. Action creators for increment, decrement, double, and halve
* 2. Reducer to handle these actions 👆🏻
*/

function increment() {
return {
type: "INCREMENT"
}
}

function decrement() {
return {
type: "DECREMENT"
}
}

function double() {
return {
type: "DOUBLE"
}
}

function halve() {
return {
type: "HALVE"
}
}

function reducer(state = 0, action) {

switch(action.type) {
case "INCREMENT":
return state + 1
case "DECREMENT":
return state - 1
case "DOUBLE":
return state * 2
case "HALVE":
return Math.round(state / 2)
 default:
return state
}
}

7)Plain JS Redux - Creating the Store:

======================================
we need to get store object by using redux methoud createStore(reducer function)

const store = redux.createStore(reducer)

console.log(store)

index.js:
=========

const redux = require("redux")

function increment() {
return {
type: "INCREMENT"
}
}

function decrement() {
return {
type: "DECREMENT"
}
}

function reducer(state = {count: 0}, action) {

// return new state based on the incoming action.type
switch(action.type) {
case "INCREMENT":
return {
count: state.count + 1
}
case "DECREMENT":
return {
count: state.count - 1
}
default:
return state
}
}

const store = redux.createStore(reducer)

console.log(store)

8)Plain JS Redux - subscribe and getState:

==========================================
by using store object we can subscribe and getState of an object

const store = redux.createStore(reducer)

store.subscribe(()=>{
getState()
})
index.js:
=========
const redux = require("redux")

function increment() {
return {
type: "INCREMENT"
}
}

function decrement() {
return {
type: "DECREMENT"
}
}

function reducer(state = {count: 0}, action) {

// return new state based on the incoming action.type
switch(action.type) {
case "INCREMENT":
return {
count: state.count + 1
}
case "DECREMENT":
return {
count: state.count - 1
}
default:
return state
}
}

const store = redux.createStore(reducer)

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

9)Plain JS Redux - dispatch

===========================
store.dispatch(actiontype as parameter to pass the values to reducer)

index.js:
========
const redux = require("redux")

function increment() {
return {
type: "INCREMENT"
}
}

function decrement() {
return {
type: "DECREMENT"
}
}
function reducer(state = {count: 0}, action) {
// return new state based on the incoming action.type
switch(action.type) {
case "INCREMENT":
return {
count: state.count + 1
}
case "DECREMENT":
return {
count: state.count - 1
}
default:
return state
}
}

const store = redux.createStore(reducer)

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

store.dispatch(increment())
store.dispatch({type:"INCREMENT"})

10)Plain JS Redux - Payload in action creators:

===============================================
Dynamic passing action types into reducer

index.js:
=========
const redux = require("redux")

function changeCount(amount = 1) {
return {
type: "CHANGE_COUNT",
payload: amount
}
}

function reducer(state = {count: 0}, action) {

switch(action.type) {
case "CHANGE_COUNT":
return {
count: state.count + action.payload
}
default:
return state
}
}

const store = redux.createStore(reducer)

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

store.dispatch(changeCount())

11)Plain JS Redux - Handling more complex state:

================================================
index.js:
=========
const redux = require("redux")

function changeCount(amount = 1) {
return {
type: "CHANGE_COUNT",
payload: amount
}
}

function addFavoriteThing(thing) {
return {
type: "ADD_FAVORITE_THING",
payload: thing
}
}

const initialState = {
count: 0,
favoriteThings: []
}

function reducer(state = initialState, action) {

switch(action.type) {
case "CHANGE_COUNT":
return {
...state,
count: state.count + action.payload
}
case "ADD_FAVORITE_THING":
return {
...state,
favoriteThings: [...state.favoriteThings, action.payload]
}
default:
return state
}
}

const store = redux.createStore(reducer)

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

store.dispatch(changeCount(2))
store.dispatch(addFavoriteThing("Raindrops on roses"))
store.dispatch(addFavoriteThing("Whiskers on kittens"))

14)Plain JS Redux - Practice::

==============================
/**
* Challenge: implement an action creator called `removeFavoriteThing` which takes
the string
* of the favorite thing you want to remove from the array and removes it
*/

index.js:
=========

const redux = require("redux")

function changeCount(amount = 1) {
return {
type: "CHANGE_COUNT",
payload: amount
}
}

function addFavoriteThing(thing) {
return {
type: "ADD_FAVORITE_THING",
payload: thing
}
}

function removeFavoriteThing(thing) {
return {
type: "REMOVE_FAVORITE_THING",
payload: thing
}
}

const initialState = {
count: 0,
favoriteThings: []
}

function reducer(state = initialState, action) {

switch(action.type) {
case "CHANGE_COUNT":
return {
...state,
count: state.count + action.payload
}
case "ADD_FAVORITE_THING":
return {
...state,
favoriteThings: [...state.favoriteThings, action.payload]
}
case "REMOVE_FAVORITE_THING": {
const arrCopy = [...state.favoriteThings]

const updatedArr = state.favoriteThings.filter(thing =>

thing.toLowerCase() !== action.payload.toLowerCase())
return {
...state,
favoriteThings: updatedArr
}
}
default:
return state
}
}

const store = redux.createStore(reducer)

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

store.dispatch(addFavoriteThing("Raindrops on roses"))
store.dispatch(addFavoriteThing("Whiskers on kittens"))

/**
* Challenge: implement an action creator called `removeFavoriteThing` which takes
the string
* of the favorite thing you want to remove from the array and removes it
*/
store.dispatch(removeFavoriteThing("raindrops on roses"))

15)Plain JS Redux - Even more complex state:

============================================

index.js:
=========
const redux = require("redux")

function changeCount(amount = 1) {
return {
type: "CHANGE_COUNT",
payload: amount
}
}

function addFavoriteThing(thing) {
return {
type: "ADD_FAVORITE_THING",
payload: thing
}
}

function removeFavoriteThing(thing) {
return {
type: "REMOVE_FAVORITE_THING",
payload: thing
}
}

function setYouTubeTitle(title) {
return {
type: "SET_YOUTUBE_TITLE",
payload: title
}
}

function upvoteVideo() {
return {
type: "UPVOTE_VIDEO"
}
}

const initialState = {
count: 0,
favoriteThings: [],
youtubeVideo: {
title: "",
 viewCount: 0,
votes: {
up: 0,
down: 0
}
}
}
console.log(initialState)

/**
* Challenge:
* Implement an action creator and reducer case to handle upvoting our YouTube
video (+1)
*/

function reducer(state = initialState, action) {

switch(action.type) {
case "CHANGE_COUNT":
return {
...state,
count: state.count + action.payload
}
case "ADD_FAVORITE_THING":
return {
...state,
favoriteThings: [...state.favoriteThings, action.payload]
}
case "REMOVE_FAVORITE_THING": {
const arrCopy = [...state.favoriteThings]

const updatedArr = state.favoriteThings.filter(thing =>

thing.toLowerCase() !== action.payload.toLowerCase())
return {
...state,
favoriteThings: updatedArr
}
}
case "SET_YOUTUBE_TITLE":
return {
...state,
youtubeVideo: {
...state.youtubeVideo,
title: action.payload
}
}
case "UPVOTE_VIDEO":
return {
...state,
youtubeVideo: {
...state.youtubeVideo,
votes: {
...state.youtubeVideo.votes,
up: state.youtubeVideo.votes.up + 1
}
}
}
default:
return state
}
}

const store = redux.createStore(reducer)

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

store.dispatch(setYouTubeTitle("Learn Redux"))
store.dispatch(upvoteVideo())

16 17)Plain JS Redux - combineReducers Part 1 $ Part 2:

=======================================================
// import the separate reducers
// combine the reducers into a single state tree
// create the store
// export the store

redux/count.js:
===============
export function changeCount(amount = 1) {
return {
type: "CHANGE_COUNT",
payload: amount
}
}

export default function countReducer(count = 0, action) {

switch(action.type) {
case "CHANGE_COUNT":
return count + action.payload
default:
return count
}
}

redux/favouriteThings.js:
=========================
export function addFavoriteThing(thing) {
return {
type: "ADD_FAVORITE_THING",
payload: thing
}
}

export function removeFavoriteThing(thing) {

return {
type: "REMOVE_FAVORITE_THING",
payload: thing
}
}

export default function favoriteThingsReducer(favoriteThings = [], action) {

switch(action.type) {
case "ADD_FAVORITE_THING":
return [...favoriteThings, action.payload]
case "REMOVE_FAVORITE_THING": {
const updatedArr = favoriteThings.filter(thing => thing.toLowerCase() !
== action.payload.toLowerCase())
 return updatedArr
}
default:
return favoriteThings
}
}

redux/youTubeVideo.js:
======================
export function setYouTubeTitle(title) {
return {
type: "SET_YOUTUBE_TITLE",
payload: title
}
}

export function incrementViewCount() {

return {
type: "INCREMENT_VIEW_COUNT"
}
}

export function upvoteVideo() {

return {
type: "UPVOTE_VIDEO"
}
}

export function downvoteVideo() {

return {
type: "DOWNVOTE_VIDEO"
}
}

const initialState = {
title: "",
viewCount: 0,
votes: {
up: 0,
down: 0
}
}

export default function youTubeVideoReducer(youTubeVideo = initialState, action) {

switch(action.type) {
case "INCREMENT_VIEW_COUNT":
return {
...youTubeVideo,
viewCount: youTubeVideo.viewCount + 1
}
case "SET_YOUTUBE_TITLE":
return {
...youTubeVideo,
title: action.payload
}
case "UPVOTE_VIDEO":
return {
...youTubeVideo,
votes: {
 ...youTubeVideo.votes,
up: youTubeVideo.votes.up + 1
}
}
case "DOWNVOTE_VIDEO":
return {
...youTubeVideo,
votes: {
...youTubeVideo.votes,
down: youTubeVideo.votes.down + 1
}
}
default:
return youTubeVideo
}
}

redux/index.js:
=========
// import the separate reducers
// combine the reducers into a single state tree
// create the store
// export the store

const redux = require("redux")

const {combineReducers, createStore} = redux
import countReducer from "./count"
import favoriteThingsReducer from "./favoriteThings"
import youTubeVideoReducer from "./youTubeVideo"

const rootReducer = combineReducers({

count: countReducer,
favoriteThings: favoriteThingsReducer,
youTubeVideo: youTubeVideoReducer
})

const store = createStore(rootReducer)

store.subscribe(() => {
console.log(store.getState())
})
export default store

index.js:
=========
import store from "./redux"
import {changeCount} from "./redux/count"

store.dispatch(changeCount(42))

18)Plain JS Redux Practice 1:

==============================
/**
* Challenge:
*
* 1. Bring in all the action creators we've made so far and dispatch them, just to
make sure things are working
 */

above combine part 1 and part 2 same

===================================

index.js:
=========
import store from "./redux"
import {changeCount} from "./redux/count"
import {addFavoriteThing, removeFavoriteThing} from "./redux/favoriteThings"
import {setYouTubeTitle, incrementViewCount, upvoteVideo, downvoteVideo} from
"./redux/youTubeVideo"

/**
* Challenge:
*
* 1. Bring in all the action creators we've made so far and dispatch them, just to
make sure things are working
*/

store.dispatch(changeCount(42))
store.dispatch(addFavoriteThing("Door bells"))
store.dispatch(addFavoriteThing("Sleigh bells"))
store.dispatch(removeFavoriteThing("door bells"))
store.dispatch(setYouTubeTitle("Learning Redux is Fun!"))
store.dispatch(incrementViewCount())
store.dispatch(upvoteVideo())
store.dispatch(incrementViewCount())
store.dispatch(upvoteVideo())
store.dispatch(incrementViewCount())
store.dispatch(upvoteVideo())
store.dispatch(downvoteVideo())

/*

{count: 42, favoriteThings: [], youTubeVideo: {title: "", viewCount: 0, votes: {up:
0, down: 0}}}

{count: 42, favoriteThings: ["Door bells"], youTubeVideo: {title: "", viewCount: 0,

votes: {up: 0, down: 0}}}

{count: 42, favoriteThings: ["Door bells", "Sleigh bells"], youTubeVideo: {title:

"", viewCount: 0, votes: {up: 0, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "", viewCount:

0, votes: {up: 0, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux

is Fun!", viewCount: 0, votes: {up: 0, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux

is Fun!", viewCount: 1, votes: {up: 0, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux

is Fun!", viewCount: 1, votes: {up: 1, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux

is Fun!", viewCount: 2, votes: {up: 1, down: 0}}}
{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux
is Fun!", viewCount: 2, votes: {up: 2, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux

is Fun!", viewCount: 3, votes: {up: 2, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux

is Fun!", viewCount: 3, votes: {up: 3, down: 0}}}

{count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux

is Fun!", viewCount: 3, votes: {up: 3, down: 1}}}

*/

19)Plain JS Redux Practice 2:

==============================
same as above 18

index.js:
=========

/**
* Challenge:
*
* Create a new state property to hold the currently-logged-in user info. I.e. if
our app wanted to allow a user to log in, we would likely want to keep track of
some info from the logged in user. For this challenge, you'll save a user with
these properties:
* {
* firstName: ___,
* lastName: ___,
* id: ___,
* email: ___
* }
*
* This will require
* (1) Creating a new file to hold our new Redux stuff re: the user (e.g.
user.js),
* (2) Creating a new action creator (e.g. "setUserDetails"),
* (3) Creating a new reducer, and
* (4) Adding that reducer to our rootReducer with combineReducers
*/

redux/user.js:
==============
export function setUserDetails(user) {
return {
type: "SET_USER_DETAILS",
payload: user
}
}

export function removeUserDetails() {

return {
type: "REMOVE_USER_DETAILS"
}
}
export default function userReducer(user = {}, action) {
switch(action.type) {
case "SET_USER_DETAILS":
return {
...user,
...action.payload
}
case "REMOVE_USER_DETAILS":
return {}
default:
return user
}
}
redux/index.js:
===============

const redux = require("redux")

const {combineReducers, createStore} = redux
import countReducer from "./count"
import favoriteThingsReducer from "./favoriteThings"
import youTubeVideoReducer from "./youTubeVideo"
import userReducer from "./user"

const rootReducer = combineReducers({

count: countReducer,
favoriteThings: favoriteThingsReducer,
youTubeVideo: youTubeVideoReducer,
user: userReducer
})

const store = createStore(rootReducer)

store.subscribe(() => {
console.log(store.getState())
})
export default store

main index.js:
==============
import store from "./redux"
import {changeCount} from "./redux/count"
import {addFavoriteThing, removeFavoriteThing} from "./redux/favoriteThings"
import {setYouTubeTitle, incrementViewCount, upvoteVideo, downvoteVideo} from
"./redux/youTubeVideo"
import {setUserDetails, removeUserDetails} from "./redux/user"

store.dispatch(setUserDetails({
firstName: "Joe",
lastName: "Schmoe",
id: 1,
email: "[email protected]"
}))
store.dispatch(setUserDetails({
email: "[email protected]"
}))
store.dispatch(removeUserDetails())

Important:
==========
18) Redux in React - Setup & Practice:
======================================
[email protected]
[email protected]

redux/index.js:
===============
/**
* Challenge: set up redux action creators, reducer, and store
* We'll be building a counter app to start out.
* Read the comments below for the step-by-step challenges
*/

import redux, {createStore} from "redux"

function increment() {
return {
type: "INCREMENT"
}
}

function decrement() {
return {
type: "DECREMENT"
}
}

function reducer(count = 0, action) {

switch(action.type) {
case "INCREMENT":
return count + 1
case "DECREMENT":
return count - 1
default:
return count
}
}

const store = createStore(reducer)

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

// 1. Create action creators for having the count "increment" and "decrement"

// 2. Create a reducer to handle your increment and decrement actions

// 3. Create a new Redux store

// 4. Set up the subscribe function so we can more easily see the changes to the
Redux state as they happen

// 5. Export the store as a default export

19)Redux in React - react-redux & Provider:
===========================================
same example above 18 Redux in React - react-redux & Provider

index.js:
=========
import React from "react"
import ReactDOM from "react-dom"
import {Provider} from "react-redux"
import store from "./redux"

import App from "./App"

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

20)Redux in React - connect()

=============================
--> How does connect work?
--> Pass 2 things:
1."What parts of the global state does this component want access to ?"
2."What actions do you want to be able to dispatch from this component ?"
--> It then returns a function to which you pass the component you want to connect.
When called, this function creates a new component wrapping yours which passes
the
global state and "dispatchable" actions to your component via props.

--> connect("What parts of state do you want ? ","What actions do you want to
dispatch ?")(Components)
connect(mapStateToPropsFunc,mapDispatchToPropsFunc)(Component)

App.js:
=======

import React from "react"

import {connect} from "react-redux"

function App(props) {
return (
<div>
<h1>COUNT GOES HERE</h1>
<button>-</button>
<button>+</button>
</div>
)
}

export default connect

(/* What parts of state do you want? */, /* What actions to dispatch? */)(App)
21)Redux in React - mapStateToProps:
==================================
function mapStateToProps(globalState) {
// return an object where the keys are the name of the prop your component
wants,
// values are the actual parts of the global state your component wants
return {
bananas: globalState
}
}

// Write the mapStateToProps function from scratch

// Takes the global state from Redux as a parameter
// returns an object where the keys are the name of the prop your component wants,
// and the values are the actual parts of the global state your component wants

App.js:
=======
import React from "react"
import {connect} from "react-redux"

function App(props) {
return (
<div>
<h1>{props.count}</h1>
<button>-</button>
<button>+</button>
</div>
)
}

// Write the mapStateToProps function from scratch

// Takes the global state from Redux as a parameter
// returns an object where the keys are the name of the prop your component wants,
// and the values are the actual parts of the global state your component wants
function mapStateToProps(state) {
return {
count: state
}
}

export default connect(mapStateToProps, {})(App)

22)Redux in React - mapDispatchToProps:

=======================================
redux/index.js:
==============
import redux, {createStore} from "redux"

export function increment() {

return {
type: "INCREMENT"
}
}

export function decrement() {

 return {
type: "DECREMENT"
}
}

function reducer(count = 0, action) {

switch(action.type) {
case "INCREMENT":
return count + 1
case "DECREMENT":
return count - 1
default:
return count
}
}

const store = createStore(reducer)

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

App.js:
=======
import React from "react"
import {connect} from "react-redux"
import {increment, decrement} from "./redux"

function App(props) {
return (
<div>
<h1>{props.count}</h1>
<button onClick={props.decrement}>-</button>
<button onClick={props.increment}>+</button>
</div>
)
}

// https://react-redux.js.org/api/connect#connect

export default connect(state => ({count: state}), {increment, decrement})(App)

22)Redux in React - useSelector():

==================================
App.js replace useConnect with useSelector()
======

import React from "react"

import {useSelector} from "react-redux"
import {increment, decrement} from "./redux"

function App(props) {
const count = useSelector(state => state)
return (

)
}

// export default connect(state => ({count: state}), {increment, decrement})(App)

export default App
24)Redux in React - useDispatch():
==================================
replace connect(1,2) first parameter with useSelector and second parameter with
useDispatch():
-----------------------------------------------------------------------------------
-----------

App.js:
=======
import React from "react"
import {useSelector, useDispatch} from "react-redux"
import {increment, decrement} from "./redux"

function App(props) {
const count = useSelector(state => state)
const dispatch = useDispatch()
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(decrement())}>-</button>
<button onClick={() => dispatch(increment())}>+</button>
</div>
)
}

export default App

// https://thoughtbot.com/blog/using-redux-with-react-hooks
// https://react-redux.js.org/api/hooks#usage-warnings

25)Redux in React - Redux Thunk:

================================
not understood:
===============
App.js:
=======
import redux, {createStore, applyMiddleware} from "redux"
import thunk from "redux-thunk"

export function increment() {

return (dispatch, getState) => {
const number = getState()
const baseUrl = "https://swapi.co/api/people"
fetch(`${baseUrl}/${number}`)
.then(res => res.json())
.then(res => {
console.log(res)
dispatch({
type: "INCREMENT",
payload: res
})
})
}
}

/**
{name: "C-3PO", height: "167", mass: "75", hair_color: "n/a", skin_color: "gold",
eye_color: "yellow", birth_year: "112BBY", gender: "n/a", homeworld:
"https://swapi.co/api/planets/1/", films: ["https://swapi.co/api/films/2/",
"https://swapi.co/api/films/5/", "https://swapi.co/api/films/4/",
"https://swapi.co/api/films/6/", "https://swapi.co/api/films/3/",
"https://swapi.co/api/films/1/"], species: ["https://swapi.co/api/species/2/"],
vehicles: [], starships: [], created: "2014-12-10T15:10:51.357000Z", edited: "2014-
12-20T21:17:50.309000Z", url: "https://swapi.co/api/people/2/"}

*/

export function decrement() {

return {
type: "DECREMENT"
}
}

function reducer(count = 0, action) {

switch(action.type) {
case "INCREMENT":
return count + 1
case "DECREMENT":
return count - 1
default:
return count
}
}

const store = createStore(reducer, applyMiddleware(thunk))

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

Getting Hired - Edabit:

=======================

For Practicing Coding Challenges

https://edabit.com/.

Codesignal:
===========
https://app.codesignal.com/signup

pramp:
======
practice:

https://www.pramp.com/.

Getting Hired - Problem Solving:

================================
George Polya --> how to solve it ?

1) Understand the problem

2) Devise a plan
3) Execute the plan

4) Review your solution