DEV Community: Pathetic Geek

Redux — React state management techniques with chocolate milk

Pathetic Geek — Sat, 31 Jul 2021 15:31:57 +0000

Redux

Now, hearing the word redux may or may not scare you, or it may give you some flashbacks and PTSD starts coming in. But if you do it right, none of that's going to happen to you.
This is the library I always reach out to anytime I want to add state management to any website.

Also, using this might seem like a lot of work in a small project or like in an example, but it really shines when you're on a medium-sized project and have a big state to manage. If you have a small project, I'd recommend you to use React context, you can see the previous article to learn about it.

Terminologies of redux

🧙‍♂️ Action:
An action is an object having a type property for what type of action should happen and a payload for sending extra data about that action. The payload can be present or cannot be, it depends on if the reducer needs any extra data to process this action. This action is what we dispatch and is sent to the reducer to process state change. Some action objects/functions are,

// A simple object with type as it doesn't need any payload
const logout = { type: 'LOGOUT' }
// We call this function with the user object and
// it returns an action with user object as payload
// and we can dispatch this to the store
const login = (user) => ({ type: 'LOGIN', payload: user })

📨 Dispatch:
Dispatching means sending an action to the store to be processed. We pass our action to a dispatch function, and it goes to the reducer to be so that reducer modifies the state accordingly.

// We create our store using redux's create store function
// it needs a root reducer which will be shown later how to do
const store = createStore(...)
// here we have a dispatch property we can call with action
store.dispatch({ type: 'LOGOUT' })

🚜 Reducer:
A reducer is a pure function that takes in the current state, modifies it based on the action, and then returns the modified state. Being a pure function means it only modifies the state and does not trigger anything else like DOM manipulations or anything. The main reducer of our store has a special name and is often referred to as the rootReducer.
An example of user reducer we have seen in the last post, for others here's a basic reducer,

// Our starting state
const initialState = { isLoggedIn: false, user: null }

// The first time reducer is called is to make 
// the state as the state is undefined in starting
// so we give it a default value 
const reducer = (state = initialState, action) => {
    // we perform actions based on the type
    switch(action.type) {
        case 'LOGOUT':
            // we return a new state to be set
            return { isLoggedIn: false, user: null }
        case 'LOGIN':
            // when we create the login action we also pass in
            // the user as payload so that we can set it here
            return { isLoggedIn: true, user: action.payload }
        default:
            // If any other action was done
            // we don't need to change our state
            return state
    }
}

🏬 Store:
Store is what stores all of our state. It has a function getState to get its state and a function dispatch to send updates. We can have multiple reducers working in our state, so if we have posts we can have a post reducer to so all posts actions, if we have login we can have a login reducer for it etc. How we create a state is,

import { createStore, combineReducers } from 'redux'
// Dummy reducers for example which return existing
// state on any action
const loginReducer = (state = { user: null }, action) => state
const postReducer = (state = { posts: {} }, action) => state

// How we set reducers in this object will be the shape of our state
// So here we will have a state that looks like
// { login: { user: null }, posts: {} }
const rootReducer = combineReducers({
    login: loginReducer,
    post: postReducer
})

// here we create our store using the rootReducer
const store = createStore(rootReducer)
// we can also create store with just one reducer as follows
// const store = createStore(loginReducer)
// and our state will look like
// { user: null }

// How to get our current state
const state = store.getState()
// How to dispatch actions to change state
store.disapatch({ type: 'LOGOUT' })

Getting started with it in react

So redux is something that was made for use in vanilla JavaScript. So there is the react-redux package that will provide you with what you need for react stuff.

So react specific things are,

Provider component

The Provider component will be wrapping our <App /> component, and we pass in our store to it, so our store becomes accessible to every component. We do this in src/index.js file.

import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import App from "./App";
// Assuming we have our store created in redux/store.js file
import store from "./redux/store";

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

useSelector and useDispatch hooks

How we get state in our React app is using the useSelector hook, and to dispatch actions we use the useDispatch hook.

function ExamplePage() {
    // useSelector hook takes in a function and that is
    // where we say what part of state we want.
    const loginState = useSelector(state => state.login)
    // We get a state param in the function which is the state
    // of the app and we return the part we care about
    const postState = useSelector(state => state.post)

    // This hook gives us the store.dispatch dispatch function
    const dispatch = useDispatch()

    // So here we call the dispatch function with our action
    const logout = () => dispatch({ type: 'LOGOUT' })

    return null
}

How the data flows

And this is basically all you need to know!

Creating a full redux store

Now that you know all this cool stuff, creating the store is pretty straightforward. We will now create a simple login state here.

Here is the list of things we need to do:

[ ] Create a login reducer in and root reducer
[ ] Create the store with root reducer
[ ] Wrap our App in the Provider component
[ ] Create some actions
[ ] Finally, use the useSelector and useDispatch hooks 🎉

The folder structure we will be making will be something like following,

learning-redux (project folder)
└── src
    ├── App.js
    ├── index.js
    └── redux
        ├── actions
        │   └── login.js
        ├── reducers
        │   ├── loginReducer.js
        │   └── index.js
        └── store.js

So let's start with our login reducer,

// src/redux/reducers/loginReducer.js
const initialState = { isLoggedIn: false, user: null }

const loginReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'LOGIN':
            // When user is logged in we set the user data and logged in to true
            // The user data comes from the action payload
            return { isLoggedIn: true, user: action.payload }
        case 'LOGOUT':
            // when user signs out we need to clear the state
            return { isLoggedIn: false, user: null }
        case 'UPDATE_USER':
            // we create a new state that we will modify and return
            const newState = { ...state }
            // when a user is updated we get the new user in payload
            // so we merge the user in state and the payload
            newState.user = { ...state.newState, ...action.payload }
            // and now we return the state
            return newState
        default:
            // by default we just return the state unchanged
            return state
    }
}

// and we export this by default
export default loginReducer

Now let's create our root reducer that uses this login reducer,

// src/redux/reducers/index.js
import { combineReducers } from 'redux'
import loginReducer from './loginReducer'

// this will create our state and the state will have shape like this object
// So here our state will be like
// state: { login, { isLoggedIn: false, user: null } }
const rootReducer = combineReducers({
    login: loginReducer
})

// and we export this by default
export default rootReducer

Moving on to creating the store,

// src/redux/store.js
import { createStore } from 'redux'
import rootReducer from './reducers'

// we use the createStore function from redux
// and pass in our root reducer
const store = createStore(rootReducer)

// we export this too by default
export default store

Time to wrap our App inside redux provider,

// src/index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import App from "./App";
import store from "./redux/store";

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

Time to create some action (not the South Indian movie kind),

// src/redux/actions/login.js

// when user signs in we will dispatch the action returned
// by this function, we will need to pass this our user object
export const login = (user) => ({ type: 'LOGIN', payload: user })

// we can call this function without passing anything
// and dispatch the returned action to sign out the user
export const logout = () => ({ type: 'LOGOUT' })

// we export these both as named exports

Finally, after all the hard work we've done. Let's use all this in our App file,

// src/App.js
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login } from "./redux/actions/login";

export default function App() {
  // Use the component state for getting user's name input
  const [username, setUsername] = useState("");

  // Getting the login state by using the useSelector hook
  const loginState = useSelector((state) => state.login);
  // Getting the store's dispatch function to dispatch actions
  const dispatch = useDispatch();

  return (
    <div className="App">
      {/* When user is logged in we show their username */}
      {loginState.isLoggedIn ? (
        <p>
                    {/* When user is logged in we will have the user object with username in it */}
                    You are: {loginState.user.username}
                </p>
      ) : (
        <>
          {/* When user is not logged in we show them the form */}
          <input
            placeholder="Who are you?"
            value={username}
            onChange={(e) => {
              setUsername(e.target.value);
            }}
          />
          <button
            onClick={() => {
              // To get the login action we pass in the user object
              // For now the user object just has username
              const loginAction = login({ username });
              // And now we dispatch our action
              dispatch(loginAction);
            }}
          >
            Let me In!!!
          </button>
        </>
      )}
    </div>
  );
}

And this is how we use redux to manage our app state.

Here's a code sandbox, so you can try yourself:

Final notes

Redux comes with a lot of boilerplate for it to make even the slightest of sense for a small project. So choose it wisely. Now, if you just want a few things like a login state a theme state you are better off using react context than dealing with this. And for anything which needs more than that you should be using redux because it provides such a nice way to manage the global state even if you have hundreds of components.

Next Steps

Try taking a look at the redux toolkit. It makes all this boilerplate go away, and you just need to create the reducer and store it, everything else is done like magic. But only dive into that if you understand how traditional redux works.

If I missed anything or if something isn't clear, please comment, and I'll try to either answer myself or give you someplace where you can read about it in more detail. This will also help anyone else who didn't understand it. Thanks :)

Context — React state management techniques with chocolate milk

Pathetic Geek — Sat, 31 Jul 2021 15:31:47 +0000

React Context

It's fun games till now, we can store the state in our component and then update it and pass it down to a few components. But what if more components need access to it? That's where it gets complicated, like my non-existent relationship.

The most basic form

What react context does is it gives you a Provider component, and its value can be access by any component inside it, no matter how deep it is. Note that it does not have a way to update its value, so we need to do that for it. For that, we can use useState and pass in an update function as the value of context so when that state gets updated the context's value gets updated.

Now let's see how we can move our user state to context,

const INITIAL_STATE = {
    username: 'pathetic_geek',
    avatar: 'https://www.secretrickroll.com/assets/opt2.jpg',
    // ...other stuff
}
// Our context's value will be an array with first item as state
// and second as a function to set the state which we will add later
const UserContext = React.createContext([INITIAL_STATE, () => {}])

// Our App component in index.js will be 
// wrapped inside this like,
// <UserProvider>   <App />   </UserContext>
export const UserProvider = ({ children }) => {
    const [user, setUser] = useState(INITIAL_STATE)

    // Update function from before in useCallback
    // this function remains same on each render and
    // doesn't trigger re-renders everytime.
  // This is a fancy way of saying it is optimized
    const updateUser = React.useCallback((newValue) => {
        // Pass a function to merge old value and new value
        setUser(val => { ...val, ...newValue })
    }, [])

    // We memoize the value so that it is only updated
    // when user updates and doesn't trigger re-renders
    const value = React.useMemo(() => [user, updateUser], [user])

    // we pass in the value of context as a prop to provider
    // and all it's children will have access to that value
    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    )
}

// This hook will provide you the
// value of user and can be used like
// const [user, updateUser] = useUser()
// and to update the user we just do
// updateUser({ username: 'noobslayer69' })
export const useUser = () => {
    return React.useContext(UserContext)
}

// and we export default our context
export default UserContext

This is what a basic context state looks like. But it is very primitive, like it's a useState object. So we can instead add a useReducer here to give us a better predictive state.

The `useReducer` hook

🏭 Reducer:
A reducer function is something that takes in the old state and an action. Then it modifies the state based on the action provided. So this way our state will always be modified predictably.
👨‍🏭 Action:
The most common form to pass actions is an object which has a type and a payload. We check the action type and then modify the state based on it. We can also pass in a payload that can be used to pass data to our reducer like the new input value, so we can set it inside the reducer.

Let's see a basic useReducer usage,

const initialState = 0

// Our reducer gets the state and the action we pass
// in dispatch and returns the new state after modfying it
// It is first called when setting up the state so we set 
// a default state for when the state is not there or is null
// Whatever this returns will become the new state
function reducer(state = initialState, action) {
    // The action will be an object like { type: 'INC' }
    // So we modify the state based on the action type
    switch(action.type) {
        case 'INC':
            // When action type is INC we add increment the state
            return state + 1
        case 'SET':
            // When action type is SET we also pass in payload
            // which is the value we want to set state to.
            // So we just return that
            return action.payload
        default:
            // When the state is first being created
            // or when the action type is wrong
            return state
    }
}

function Example() {
    // We pass the useReducer our reducer and initial state
    const [counter, dispatch] = React.useReducer(reducer, initialState)

    // We can call this function to dispatch the increment action
    const incrementValue = () => dispatch({ type: 'INC' })
    // We call this to set the value of state and pass in payload
    // to let reducer know what value we want to set it to
    const setValue = () => dispatch({ type: 'SET', payload: 7 })

    return null
}

Combining forces (with reducer)

So now that we know how to use useReducer and context, let's combine them both,

const initialState = {
    username: 'pathetic_geek',
    avatar: 'https://www.secretrickroll.com/assets/opt2.jpg',
}
// Same as before we create context wih initial value
// as an array where first item is the state and second
// is a function to update the state which we will add later
const UserContext = React.createContext([initialState, () => {}])

function reducer(state = initialState, action) {
    switch(action.type) {
        case 'UPDATE_USERNAME':
            // We create a new object and add properties of
            // state in it then override the username property
            return { ...state, username: action.payload }
        case 'UPDATE_AVATAR':
            // This time we override the avatar key
            return { ...state, avatar: action.payload }
        default:
            return state
    }
}

// Same provider from before but with useReducer
export const UserProvider = ({ children }) => {
    const [user, dispatch] = useReducer(reducer, initialState)

    const value = React.useMemo(() => [user, dispatch], [user])

    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    )
}

// Same useUser hook from before
export const useUser = () => {
    return React.useContext(UserContext)
}

function Example() {
    // We get the value of context here
    // which is an array with user and dispatch
    const [user, dispatch] = useUser()

    // we can call this function to dispatch the username change
    // this can be called like `updateUsername('noobslayer69')`
    const updateUsername = (username) => {
        // we pass the action type and new value as payload
        dispatch({ type: 'UPDATE_USERNAME', payload: username })
    }
    // we call this function to dispatch the username change
    const updatAvatar = (avatar) => {
        dispatch({ type: 'UPDATE_AVATAR', payload: avatar })
    }

    return null
}

And this is how we manage our state using context and reducer. Here's a code sandbox, so you can see this in action,

Final notes

This is great for getting a global store quickly. Let's say you want to store the user's preferred theme or current user's data or some theme data like font size spacing etc.
One caveat of this is that it re-renders all the children of it, even ones that are not dependent on its value, so it can slow down things quite a bit if you have a big application. And also, context is meant for its value to be read very often and updated very less, so you shouldn't use it for high-frequency updates.

To mitigate all of these problems, there is redux. And traditionally, redux doesn't have a good reputation because of all the boilerplate that comes with it, but I think even with that initial setup that takes a bit to do, redux can be very useful and efficient.

So in the next part, we will be looking at how we can manage our state with this shiny new thing called the redux toolkit.

Component State — React state management techniques with chocolate milk

Pathetic Geek — Sat, 31 Jul 2021 15:31:38 +0000

Introduction

The basic idea of this is to provide you a guide on how to create a basic project with all these state management techniques like you're a baby. That will help you choose which one will be best and when you should probably move to something better.

If you're struggling with any concept, search it on YouTube and come back and continue. I have tried my best to boil things down, but I could be missing something. And do leave feedback at the end. :)

Component State

So you've just learned the shiny new thing called react and in there you've seen that there are these things called hooks and the first one is useState. Now, what does it do? You might judge by its name, it looks like it might be related to doing something with some state, and you'll be right!

Basic usage

The useState hook used to store some state for that particular component. And is used like,

function App() {
    const [name, setName] = useState('');

    return (
        <div>
            <input value={name} onChange={e => setName(e.target.value)} />
            <p>Your name is: {name}, as if you didn't know already.</p>
        </div>
    )
}

When we use this hook we get 2 things, one is the value stored and the other is a function to set its value. Here we have name as a value and setName a function to set its value.
Now, the setName function can also be used as below,

    const addPronouns = () => {
        setName((oldValue) => oldValue + " (lmao/ded)")
    }

We can pass the setName a function and the function gets the old value of it, and then we can return a new value based on that old value.

Usage with arrays and objects

This has been pretty simple, right? We can update the string, numbers and booleans easily. Now, with array and objects, we might need a few helpers. Here are a few functions I always create if I am going to any of these operations in more than two places because it's easy to make mistakes, and it will save a lot of headache.

Arrays

Let's see how we can handle an array of, umm, people I hate

function PeopleIHate() {
    const [people, setPeople] = useState([ 'everyone' ])

    // used to add to the array
    const add = (name) => {
        // we create a new array and spread people in it
        // then add the new name to the end
        const value = [ ...people, name ]
        // and now we set the new value
        setPeople(value)
    }

    // used to delete from the array
    const delete = (index) => {
        // We use array.filter method to remove the value at that index
        // It is important to use index or some kind of id because
        // we can have people with same name
        const value = people.filter((_, idx) => idx !== index)
        // and now we set the new value
        setPeople(value)
    }

    // update a value in the array
    const update = (index, newVal) => {
        const value = people.map((value, idx) => {
            // We check if this is the index we need to update
            // if it is return newVal or else return existing value
            return idx === index ? newVal : value
        })
        // and now we set the new value
        setPeople(people)
    }

    return null // An exercise for the reader
}

And now we can use these functions whenever we need to do one of these operations.
Don't get all scared by the size of this, if you remove comments and do some fancy syntax, this will be at most ~8 lines.

Objects

Objects are pretty simple to do, we only have one update function.
Let's say we want to store the user object,

function SettingsPage() {
    const [user, setUser] = useState({
        username: 'pathetic_geek',
        avatar: 'https://www.secretrickroll.com/assets/opt2.jpg',
        // ...other stuff
    })

    // used to update the user object, should be called like
    // update({ username: 'noobslayer69' })
    const update = (newValue) => {
        // We create an object then put the value of users object in it
        // and then we override it with whatever is in the newValue object
        // The ... used here are called spread operators
        const value = { ...user, ...newValue }
        // and now we set the new value
        setUser(value)
    }
}

And this is how we can manage the state inside one component using the useState hook.

Final notes

This is used only when the value you are storing is needed in just one component or just the component and one or two of its children. So the examples can be when you are making a form and need to store the input values.
If you need to access to the value or update it from even more places, you probably should start using context or redux.

In the next part, we'll see how we can create a user state using react context and reducer.

Abstracting with react hooks on LSD

Pathetic Geek — Sat, 17 Jul 2021 15:47:05 +0000

3. The final one, `useBussinessLogic` hook

Hooks are free of cost. i.e., you can make them really easily, and the only cost there is, is the cost of abstraction.

3.1 A basic `useTodos` hook

Now our components, they don't always just interact with the local state, most times they will be interacting with state on the server and managing async operations. And that's where the lines get blurry. So how about we put our hands in the magic pocket and try seeing if we have something that will help us?

Let's take an example of a basic to-do app, you'd be having a list of to-dos calling the APIs for getting it all that fun stuff, so let's extract it in a hook.

const useTodos = () => {
    const todos = useTodosStore()
    const [isLoading, setIsLoading] = useState(false)
    const [error, setError] = useState(null)

    const fetchTodos = useCallback(async () => {
        setIsLoading(true)

        try {
            const { data: todos } = await axios.get("/api/todos")
            setTodos(todos)
            setError(null)
        } catch(e) {
            setError(e)
        }

        setIsLoading(false)
    })

    useEffect(() => {
        fetchTodos()
    }, [fetchTodos])

    return {
        todos,
        fetch: fetchTodos,
        isLoading: false,
        error: null
    }
}

If we need to change something, we can just change this small function, and it works everywhere as long as it returns the same object. Now we can just use this with one line of code wherever we want.

const App = () => {
    const { todos, isLoading, error } = useTodos()

    // other stuff
}

3.2 Mutating to-dos

Now, let's say we want to toggle the state of a to-do. What do we do? We just put or hands in the custom hooks doremon pocket and bring out useToggleTodo

const useToggleTodos = () => {
    const [isLoading, setIsLoading] = useState(false)
    const [error, setError] = useState(null)

    const toggleTodo = useCallback(async todoId => {
        setIsLoading(true)

        try {
            const { data } = await axios.get(`/api/todos/${todoId}/toggle`)
            setError(null)
            setIsLoading(false)
            return data
        } catch(e) {
            setError(e)
        }

        setIsLoading(false)
    })

    return [toggleTodo, { isLoading, error }]
}

But wait, we also need to update things in our store and oh, what about having multiple useTodos. Do we have a global store or are all instances updated separately? What about race condition? And caching?

3.3 Doing it all right

Remember, our custom hooks can use other hooks too, so let's bring in useQuery from react-query

import { useQuery } from "react-query"

const fetchTodos = () => axios.get('/api/todos').then(res => res.data())

const useTodos() => {
    const { data: todos, isLoading, error } = useQuery('todos', fetchTodos)

    return { todos, isLoading, error }
}

And in our useToggleTodo we can use the useMutation from react-query so that our to-dos query is re-fetched whenever we toggle a to-do

import { useMutation } from "react-query"

const getToggleTodoById = todoId => axios.get(`/api/todos/${todoId}/toggle`)

const useToggleTodo = () => {
    return useMutation(getToggleTodoById, { refetchQueries: ["todos"] })
}

Look how we moved to using vanilla axios to react-query in seconds and didn't have to change more than a couple of lines. And now we have these nice hooks for our components to hooks into.

And my friends, that how we use hooks and manage like a pro (or from what all I know at least). Now you can go show off your new shiny gadgets to your friends if you have any.

React state management on crack

Pathetic Geek — Sat, 17 Jul 2021 15:46:57 +0000

Every application needs some kind of state management. Let's start with the most basic one, and we will see how things change with scale.

2.1 Creating a basic global store

The idea here is to have a useState that will store our state and update it, and then we will use react context to pass it down to components.

So now we will create a new context named StoreContext and in its value the first item will be the store itself and the second item will be setStore so that we can update it.

import React, { createContext, useContext, useMemo, useState } from 'react'

const StoreContext = createContext()

export const StoreProvider = ({ children, initialState }) => {
  const [store, setStore] = useState(initialState)

  const contextValue = useMemo(() => [store, setStore], [store])

  return (
    <StoreContext.Provider value={contextValue}>
      {children}
    </StoreContext.Provider>
  )
}

export const useStore = () => {
  return useContext(StoreContext)
}

export default StoreContext

2.2 Some things don't seem right

There's only so much growing your store can do with useState and at one point it will become a PIA to update your store using setStore. So let's add a useReducer in here and now our code looks something like,

import React, { createContext, useContext, useMemo, useReducer } from 'react'

const StoreContext = createContext()

export const StoreProvider = ({ children, initialState, reducer }) => {
  const [store, dispatch] = useReducer(reducer, initialState)

  const contextValue = useMemo(() => [store, dispatch], [store])

  return (
    <StoreContext.Provider value={contextValue}>
      {children}
    </StoreContext.Provider>
  )
}

export const useStore = () => {
  return useContext(StoreContext)
}

export default StoreContext

The problem with context is whenever it changes the whole tree under it re-renders, and that can be a huge performance issue. So even if we are just dispatching an action, our component will re-render. Now to fix that, let's create a different context for storing the dispatch function, and we will use it with a useDispatch hook.

import React, { createContext, useContext, useReducer } from 'react'

const StoreContext = createContext()
export const DispatchContext = createContext()

export const StoreProvider = ({ initialState, reducer, children }) => {
  const [store, dispatch] = useReducer(reducer, initialState)

  return (
    <DispatchContext.Provider value={dispatch}>
      <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
    </DispatchContext.Provider>
  )
}

export const useStore = () => {
  return useContext(StoreContext)
}

export const useDispatch = () => {
  return useContext(DispatchContext)
}

export default StoreContext

And how we use this is by wrapping our App first in DispatchContext and then StoreContext and then in our component

import React, { useRef } from 'react'

import { useDispatch, useStore } from '@state/context-reducer'

const Example = () => {
  const dispatch = useDispatch()
  const store = useStore()

  return (
        <div className="my-3">
            <p>{JSON.stringify(store)}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>
                Dispatch
            </button>
    </div>
  )
}

export default Example

2.3 One step further

So, only one global state? You might be wondering.

Rolls up my sleeves And here is where generator function comes in. Basically, we can make a function makeStore that takes in the reducer and initialState, and gives us a provider, a useStore and a useDispatch, so that we can easily make multiple stores.

import React, { createContext, useContext, useReducer } from 'react'

export default function makeStore(reducer, initialState) {
  const StoreContext = createContext(null)
  const DispatchContext = createContext(null)

  const StoreProvider = ({ children }) => {
    const [store, dispatch] = useReducer(reducer, initialState)

    return (
      <DispatchContext.Provider value={dispatch}>
        <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
      </DispatchContext.Provider>
    )
  }

  const useStore = () => {
    return useContext(StoreContext)
  }

  const useDispatch = () => {
    return useContext(DispatchContext)
  }

  return [StoreProvider, useStore, useDispatch]
}

And now we can make as many stores as we want!

const [LayoutStore, useLayout, useLayoutDispatch] = makeStore(layoutReducer, { menuOpen: false })
const [TodoStore, useTodo, useTodoDispatch] = makeStore(todosReducer, [])

2.4 And now the cherry on top

But what about persistence? You ask.

What about it? I say and just add a few lines of code in our makeStore function:

export default function makeStore(reducer, initialState, key) {
  const StoreContext = createContext(null)
  const DispatchContext = createContext(null)

    let finalInitialState = null
    try {
        finalInitialState = JSON.parse(localStorage.getItem(key)) || initialState
    } catch(e) {}

    const finalReducer = (state, action) => {
        const newState = reducer(state, action)
        localStorage.saveItem(key, JSON.stringify(newState))
        return newState
    }

    // And now we use finalInitialState and finalReducer
    // instead of reducer and initialState
}

And this will give us persistence in all stores we make.

Hold on, isn't this all client side? Yes it is. So in the next part, let's see how we can connect our app to the server state and have it play well.

React hooks on steroids

Pathetic Geek — Sat, 17 Jul 2021 15:46:47 +0000

Introduction

This isn't going to be just another hooks and context tutorial, this is going to be me writing about how to do react hooks and state management like a pro. And, it can be a little too much to digest, so grab your favourite snack and jump in.
This will be a series of three posts which will take your react hook and state skills as high as I am while writing this. If you prefer to read it in long form here's the link

Hold on, if you don't know the basics of react hooks and react context API, I highly recommend learning about them first.

1. Setting the stage with hooks

So, we've been using react's new functional components and hooks for a while now, but how many of you have realized the actual power of hooks?

First, we will look at some places where a custom hook might be good and how we implement one.

1.1 A basic `useDarkMode` hook

So we're coders we love dark themes, but not everyone does, so we need to have some theme state in our app.
We will use the window.matchMedia to match a CSS media query which is prefers-color-scheme: dark. This will tell us if the user's system theme is dark or not, and this will be our initial state.

const matchDark = '(prefers-color-scheme: dark)'

const useDarkMode = () => {
  const [isDark, setIsDark] = useState(() => {
    if (process.browser) {
      return window.matchMedia && window.matchMedia(matchDark).matches
    }
    return false
  })

  return isDark
}

export default useDarkMode

1.2 Making `useDarkMode` actually useful

Now some people man… they just can't decide if they want light or dark theme, so they put it on auto. And now, we have to account for THAT in our applications.
How we do that is, we can attach a listener to window.matchMedia and listen for when it changes.
Now to do that in code…

const matchDark = '(prefers-color-scheme: dark)'

const useDarkMode = () => {
  const [isDark, setIsDark] = useState(() => {
    if (process.browser) {
      return window.matchMedia && window.matchMedia(matchDark).matches
    }
    return false
  })

  useEffect(() => {
    const matcher = window.matchMedia(matchDark)
    const onChange = ({ matches }: MediaQueryListEvent) => setIsDark(matches)
    matcher.addListener(onChange)
    return () => {
      matcher.removeListener(onChange)
    }
  }, [setIsDark])

  return isDark
}

export default useDarkMode

And now how will be using this hook will look something like

import useDarkMode from "@hooks/useDarkMode";

const App = () => {
    const theme = useDarkMode() ? themes.dark : themes.light;

    return (
        <ThemeProvider value={theme}>
            ...
        </ThemeProvider>
    )
}

Now pat yourself on the back! You've made a useful custom hook.

1.3 The hook most needed `useInView`

One more common thing we often need is some way to detect if an element is in view or not. Here, most of us would find ourselves reaching for a library to do this but this is way simpler than it seems.

How to do this is simple:

We listen for scroll on window
We get the bounding client rect of our element to get it's offset from top
We check if (offset of element from top + height of element) is > 0 and if the offset from top of element is < window's height, if both are true then our element is visible.
If state is not correct then we set the state and call the onChange function if present.

const useInView = (
  elRef: MutableRefObject<HTMLElement | null>,
  onChange?: (_inView: boolean) => void
) => {
  const [inView, setInView] = useState(false)

  useEffect(() => {
    const onScroll = () => {
      if (!elRef.current) return

      const boundingRect = elRef.current.getBoundingClientRect()
      const elementHeight = elRef.current.offsetHeight
      const offsetTop = boundingRect.top
      const windowHeight = window.innerHeight
      const isVisible =
        offsetTop + elementHeight > 0 && offsetTop < windowHeight
      if (isVisible && !inView) {
        setInView(isVisible)
        onChange && onChange(isVisible)
      } else if (!isVisible && inView) {
        setInView(isVisible)
        onChange && onChange(isVisible)
      }
    }

    window.addEventListener('scroll', onScroll)
    return () => {
      window.removeEventListener('scroll', onScroll)
    }
  }, [elRef, onChange, inView])

  return inView
}

Using this hook is as simple as creating it

import React, { useRef } from 'react'

import useInView from '@hooks/useInView'

const Hooks = () => {
  const elementRef = useRef<HTMLDivElement>(null)
    // use as a variable
    const inView = useInView(elementRef)
    // or use a callback
    useInView(elementRef, (isInView) => {
        console.log(isInView ? 'element has appeared' : 'element has disappeared');
    })

  return (
    <div className="w-full max-w-screen-md">
      <div className="h-screen"></div>
      <div
        ref={elementRef}
        className={`py-6 text-center ${
          inView ? 'bg-blue-100' : 'bg-red-100'
        }`}>
        Is in view: {inView ? 'true' : 'false'}
      </div>
      <div className="h-screen"></div>
    </div>
  )
}

export default Hooks

And now you can probably imagine all the places hooks can be useful. In the next part, we'll look at how to manage state in react apps without losing your sanity.

DEV Community: Pathetic Geek

Redux — React state management techniques with chocolate milk

Redux

Terminologies of redux

Getting started with it in react

Provider component

useSelector and useDispatch hooks

How the data flows

Creating a full redux store

Final notes

Context — React state management techniques with chocolate milk

React Context

The most basic form

The useReducer hook

Combining forces (with reducer)

Final notes

Component State — React state management techniques with chocolate milk

Introduction

Component State

Basic usage

Usage with arrays and objects

Arrays

Objects

Final notes

Abstracting with react hooks on LSD

3. The final one, useBussinessLogic hook

3.1 A basic useTodos hook

3.2 Mutating to-dos

3.3 Doing it all right

React state management on crack

2.1 Creating a basic global store

2.2 Some things don't seem right

2.3 One step further

2.4 And now the cherry on top

React hooks on steroids

Introduction

1. Setting the stage with hooks

1.1 A basic useDarkMode hook

1.2 Making useDarkMode actually useful

1.3 The hook most needed useInView

The `useReducer` hook

3. The final one, `useBussinessLogic` hook

3.1 A basic `useTodos` hook

1.1 A basic `useDarkMode` hook

1.2 Making `useDarkMode` actually useful

1.3 The hook most needed `useInView`