2 minute read

What have I been working on?

I’ve been working on getting my React skills up and building a few projects following a Udemy course. It’s been a good experience, I’ve got a better understanding of the how to structure a React application and I feel pretty comfortable with creating components. Where I am struggling though is storage and access of data; more specifically the handling of state. At first we were passing data up and down components via props which honestly became incredibly complicated even for a simple application. We then refactored the application to use React Hooks, more specifically useContext in conjunction with Reducer. Compared to passing data via props the second iteration was a lot simpler, but has still come with it’s own headaches and it will take some time for me to really understand what is happening. There are so many parts to using useContext that really just muddy the waters for me. I think I need to build a few more examples and I should get the hang of it.

What can you teach us?

useContext is a hook that allows you to have a central source of truth when it comes to your data/state. By passing your functions and state into the value prop of your context.Provider tag, you’re able to use those elements anywhere in your code.

    const GithubContext = createContext()

const GITHUB_URL = process.env.REACT_APP_GITHUB_URL
const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN

export const GithubProvider = ({children}) => {
    const initialState = {
        users: [],
        loading: false
    }

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



    const searchUsers = async (text) => {
        setLoading()
        const params = new URLSearchParams({
            q: text
        })

        const response = await fetch(`${GITHUB_URL}/search/users?${params}`, {
            headers: {
                Authorization: `token ${GITHUB_TOKEN}`
            }
        })
        const {items} = await response.json()

        dispatch({
            type: 'GET_USERS',
            payload: items,
        })
    }

    const clearUsers = () => {
        dispatch({
            type: 'CLEAR_USERS'
        })
    }

    const setLoading = () => {
        dispatch({
            type: 'SET_LOADING'
        })
    }

    return <GithubContext.Provider value=>
        {children}
    </GithubContext.Provider>

}

export default GithubContext

This is an example of context file that is handling the api call and the actions to get users and clear users. Taken from my Github_finder repo.

What do you recommend this week?

Reading

I’ve been reading a new comic called Radiant Black about how a man who has hit rock bottom in life comes across a mini black hole that completely changes his life. It’s been a really fun read and the art is absolutely incredible.

Radiant Black Cover

Watching

I haven’t really been watching anything this week, but I do plan on revisiting WestWorld as I fell off just at the end of season 2.

Playing

I’ve started a new space exploration game called Elite dangerous. So far gameplay is good, a few mechanics to get my head around and flying is incredibly difficult, but I’m sure a few more hours and I will get the hang of it.

That’s it for this week. I will be back next week with another installment.

Blessings.