Forem: Emmanuel Effiong

How to get started with Redux Toolkit!

Emmanuel Effiong — Thu, 27 Apr 2023 17:56:12 +0000

Redux Toolkit is a popular library for simplifying the development of Redux applications. It provides a set of utilities that help you write Redux logic faster and with less boilerplate code. In this blog post, we will go through the steps of getting started with Redux Toolkit.

Step 1: Installing Redux Toolkit
The first step in getting started with Redux Toolkit is to install it. You can do this by running the following command in your terminal:

npm install @reduxjs/toolkit react-redux

Or, if you prefer using Yarn:

yarn add @reduxjs/toolkit react-redux

Step 2: Defining reducers with Redux Toolkit
One of the main features of Redux Toolkit is the createSlice function. This function allows you to define a Redux reducer along with its actions in a single file. Here's an example:

./Reducer.js
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
  },
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

In the above code, we are defining a counterSlice object that contains the name of our reducer, its initialState value, and a set of reducers that define how the state should be updated. The createSlice function automatically generates action creators for each of the reducers, which we export and use in our components.

Step 3: Creating a Redux store with Redux Toolkit
Once you have installed Redux Toolkit, you can create a Redux store using the configureStore function. This function takes an object as an argument, where you can define your Redux store configuration.

To use Redux Toolkit with React, you need to wrap your app with a Provider component that provides the Redux store to your components.

./index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import App from './App'
import reducer from './Reducer'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const store = configureStore({
  reducer: {
    counter: reducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
})
root.render(
  <StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </StrictMode>
);

In the above code, we are creating a Redux store with our reducer defined in the previous step and passing it to the Provider component, which is wrapping our App component. we also have an empty array for middleware, and a flag for enabling the Redux DevTools extension in development mode.

Step 4: Using the Redux state and actions in the component

./App.js
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

In the above code, we're importing useDispatch and useSelector hooks from react-redux, and the increment and decrement actions from our counterSlice reducer.

Next, you can use the useSelector hook to access the current value of your Redux state. For example, if your counter value is stored in the Redux store under counter.value, you can access it like this:

In the code below, we're rendering the counterValue from the Redux store and adding buttons that dispatch the increment and decrement actions when clicked.

./App.js
 import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

function App() {
  const counterValue = useSelector(state => state.counter)
  const dispatch = useDispatch()

  const handleIncrement = () => {   
    dispatch(increment())
  }

  const handleDecrement = () => {
    dispatch(decrement())
  }

  return (
    <div>
      <h2>Counter: {counterValue}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  )
}
export default App

And that's it! With Redux Toolkit, you can easily use the Redux state and actions in your React components with less boilerplate code.

View codepen here => https://codesandbox.io/s/reduxtoolkit-3c5xro

Getting Started with React Query

Emmanuel Effiong — Thu, 27 Apr 2023 08:15:07 +0000

React Query is a powerful library for managing server state in your React applications. It allows you to fetch, cache, and update data easily, without having to deal with the complexities of managing state yourself. In this blog post, we'll walk you through how to get started with React Query and how to use it in your own projects.

Step 1: Install React Query

The first step to using React Query is to install it. You can do this by running the following command in your terminal:

npm install react-query

Step 2: Set up the React Query Provider

The next step is to set up the React Query Provider in your application. This provider will allow you to use React Query throughout your application.

To do this, you need to wrap your application with the QueryClientProvider component. This component takes a QueryClient instance as a prop. The QueryClient is the main object that you'll use to interact with React Query.

Here's an example of how to set up the QueryClientProvider:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      // Your application code goes here
    </QueryClientProvider>
  );
}

Step 3: Fetching data with React Query

Now that you've set up the QueryClientProvider, you're ready to start fetching data with React Query. The easiest way to do this is to use the useQuery hook.

The useQuery hook takes two arguments: a unique key for your query and a function that fetches your data. Here's an example:

import { useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
      res.json()
    )
  );

  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>An error has occurred: {error.message}</p>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

In this example, we're fetching data from the JSONPlaceholder API and displaying it in a list.

Step 4: Updating data with React Query

React Query also makes it easy to update data in response to user actions. The useMutation hook allows you to define a mutation function that updates your data on the server.

Here's an example of how to use useMutation:

import { useMutation, useQueryClient } from 'react-query';

function AddTodo() {
  const [text, setText] = useState('');
  const queryClient = useQueryClient();

  const addTodoMutation = useMutation(
    text =>
      fetch('https://jsonplaceholder.typicode.com/todos', {
        method: 'POST',
        body: JSON.stringify({
          title: text,
          completed: false,
          userId: 1,
        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      }).then(res => res.json()),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('todos');
      },
    }
  );

  const handleSubmit = event => {
    event.preventDefault();
    addTodoMutation.mutate(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
<input
  type="text"
  value={text}
  onChange={event => setText(event.target.value)}
/>
<button disabled={addTodoMutation.isLoading}>Add Todo</button>
  </form>
  );
}

In this example, we're defining a mutation function that adds a new todo to our API. When the mutation is successful, we invalidate the todos query to refetch the data and update the UI.

Step 5: Caching data with React Query

One of the most powerful features of React Query is its caching system. React Query automatically caches your data and keeps it up to date as you make requests to your API.

Here's an example of how to use caching with React Query:

import { useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
      res.json()
    )
  );

  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>An error has occurred: {error.message}</p>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

In this example, we're using the same useQuery hook as before, but now React Query is automatically caching our data. When we make subsequent requests for the todos data, React Query will return the cached data instead of making a new request.

Step 6: Conclusion

That's it! You've now learned how to get started with React Query and how to use it to fetch, update, and cache data in your React applications.

React Query is a powerful tool that can save you a lot of time and effort in managing your application's state. With its easy-to-use API and powerful caching system, it's definitely worth considering for your next project.

Managing State with useReducer Hook.

Emmanuel Effiong — Wed, 08 Dec 2021 09:49:59 +0000

This is another built in React hook that helps with state management in React, but it has more capabilities and is used to manage complex state.
The reason why this is preferred is that, useReducer can be used to manage states that are closely related and share same values.
For example, lets say we want to manage a form that has an email field and a password field, and then you also want to check the validity of the email input and password input.

Imagine you had wanted to use the useState Hook for this., the code would have been robust with so many helper functions, but we'll have a cleaner code with the useReducer.

Before we dive into the code, lets understand useReducer and how it works..
useReducer is a react Hook that export 2 values that can be destructured, the current state and a dispatch function.
useReducer also takes in 3 properties, the reducer function, the initial state and and initial function.

The current state will always be the current state after it has been changed, just like you have in useState.
The dispatch function is the state updating function, almost like useState, but here, the dispatch function returns an action which is an object with a type and a payload. The action type helps the reducer to know the function that is updating the state and the payload is the value that needs to be updated.

Another analogy is, dispatch function acts like the delivery man, delivery man holds the pizza name or type which is the action type, while the action payload is the pizza, pizza is the content and you want to update your stomach with 😂😂😂😂😂

The reducer function receives the latest state and the action that the dispatch function sent and then returns a new updated state
The initial state is the very first state you seed your useReducer hook with.
The initial function is rarely used, but it's a function you use to set your initial state.

Okay then, lets dive in and work on the code with what we've understood so far

If you've noticed, i created our state object and seeded it into useReducer, i have also created my reducer function and also removed the initial function from the useReducer, since we won't be using it.

import React, {useReducer} from "react";

const reducerFxn = (state, action) => {

}

const initialState = {
  enteredEmail : "",
  emailIsValid : null,
  enteredPassword: "",
  passwordIsValid : null
}

const Login = () => {

  const [currentState, dispatchFxn] = useReducer(reducerFxn, initialState);

  const emailChangeHandler = (e) => {
    dispatchFxn({
      type:'ADD_EMAIL',
      payload: e.target.value
    })
  }

  const passwordChangeHandler = (e) => {
    dispatchFxn({
      type:'ADD_PASS',
      payload: e.target.value
    })
  }

  return <form>
        <div>
          <label htmlFor="email">E-Mail</label>
          <input type="email" id="email"
            value={state.enteredEmail}
            onChange={emailChangeHandler} />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input type="password" id="password"
            value={state.enteredPassword}
            onChange={passwordChangeHandler} />
        </div>
      </form>
}

export default Login

We have updated our jsx with a form, our code now has the emailChangeHandler and passwordChangeHandler, inside these handlers, you'll see our dispatch function doing what we said earlier, our dispatch function is returning an action object with type and payload. The types and payload are different for each input handler as you know.
The magic happens in the reducerFxn which you'll see below

import React, { useReducer } from "react";

const reducerFxn = (state, action) => {
  if (action.type === "ADD_EMAIL") {
    return {
      enteredEmail: action.payload,
      emailIsValid: action.payload.includes("@"),
      enteredPassword: state.enteredPassword,
      passwordIsValid: state.passwordIsValid,
    };
  }
  if (action.type === "ADD_PASS") {
    return {
      enteredEmail: state.enteredEmail,
      emailIsValid: state.emailIsValid,
      enteredPassword: action.payload,
      passwordIsValid: action.payload.trim().length >= 6,
    };
  }

  return state;
};

const initialState = {
  enteredEmail: "",
  emailIsValid: null,
  enteredPassword: "",
  passwordIsValid: null,
};
const Login = () => {
  const [currentState, dispatchFxn] = useReducer(reducerFxn, initialState);

  const emailChangeHandler = (e) => {
    dispatchFxn({
      type: "ADD_EMAIL",
      payload: e.target.value,
    });
  };

  const passwordChangeHandler = (e) => {
    dispatchFxn({
      type: "ADD_PASS",
      payload: e.target.value,
    });
  };

  const submitHandler = (e) => {
    e.preventDefault();
    console.log(currentState);
  };

  return (
    <form onSubmit={submitHandler}>
      <div>
        <label htmlFor="email">E-Mail</label>
        <input
          type="email"
          id="email"
          value={currentState.enteredEmail}
          onChange={emailChangeHandler}
        />
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input
          type="password"
          id="password"
          value={currentState.enteredPassword}
          onChange={passwordChangeHandler}
        />
      </div>
      <button>Submit</button>
    </form>
  );
};

export default Login;

We've been able to update our state using our reducerfxn, let's walk through what i did there.,

Remember i told you that, reducerfxn takes in 2 values, the current state and the action(which contains what the dispatch function dispatched).
It checks for the type of dispatch and changes the state according to who sent it, in the case of the email, it checked it with if(action.type === 'ADD_EMAIL') block which returns true and it corresponds with what we dispatched and it will change the state with the payload as you have seen.
The enteredEmail field is updated with the action.payload which is equal to the event.target.value that we dispatched, now this is where useReducer is powerful, we now updated the emaiIsValid field instantly by checking if the payload contains '@' and this will return true or false. This saves us the extra stress of creating another useState hook if we wanted to update the state with useState.

To access the current states and maybe display them in your list item, you access the latest state with the currentState field that we destructured from useReducer.
To get the emailField will be currentState.emailField, and same with others..

So basically, useState is great for independent pieces of data, but useReducer is used when one state is dependent on each other like the case of enteredEmail and emailIsValid, and often times, you'll know when to use it, meanwhile you might not really need useReducer when all you have to do is change a single value of a particular state, because most at times you will be fine with useState, and using useReducer might just be an overkill.

Working with React Fragments, Portals and Ref's

Emmanuel Effiong — Mon, 06 Dec 2021 10:22:51 +0000

React Fragments

In React, we work with JSX, jsx is that code which you return from your react component. Here is an example

The limitation with JSX is that, you cannot return multiple root jsx, and it has to be just one. This is a JavaScript feature because you can only return one thing.
This image will throw an error

Before now, the work around for someone like me and others was to wrap my content with inside another div and make it the only root component.

Now, this is totally fine and will work well, but when you have many nested div's that are returning another unnecessary div and its being rendered to the DOM, it leads to something called the DIV soup..

Basically this isn't good for Accessibility and this could break your styling., and rendering unwanted content in react isn't also good for your react performance.
The best solution is what React provided for us, React.Fragment and this is how to use it. you can either import the name fragment component from React or you use React.fragment or you use the shorthand version of it.

At the end it saves us the stress of wrapping our jsx components with unwanted and unnecessary divs and also render a clean HTML code to the DOM.

React Portals

As you know, whatever code you are writing in React gets rendered in DOM through the div with an ID of "root" which is in your index.html file., and the rendering is done in the index.js file which is the entry point.

The common use case for React Portal is that, imagine you want to render a component in another place say siblings with the root div(i.e the div with an ID of root) in the DOM and a child of Body Element, without altering where it is written, weather it is deeply nested or not, you need to port the component from where it was originally created to where you want to rendered it to be in the DOM.

So in the image below, the index.html file is where ReactDom will render the HTML code you wrote., and now you want to Render a particular component(say popup) to the div with an ID of "popup".sit to sit as a sibling to the div with the ID of "root".
And you have to explicitely add that div, React won't add it though, 😀

If you look at the image below, we imported ReactDOM as a default export, then we created a separate component (The Port component) we want to port.

In the Popup component, we call ReactDom with the createPortal method, the createPortal method expects 2 properties,

a React component like the Port Component, this is important so that we can pass props if we need to.
A place where we need to port to, here we will get the root element using our javascript document method.

When the component is rendered again, our component that was deeply nested will be ported to the sibling of our root div in index.html file.

React Refs

Refs actually allow us to work with other DOM elements, for me i use refs with forms to get the value of the input element in forms. You might ask, why can't we use the onChange event with the event.target.value to get the form input?

For some people, changing the value of an input after each keystroke might not really be what they want, all they need is just to get the value at once.

In the image below, I'll show you how to do that with ease.,

I first imported the useRef hook from React, and you know we can only use it inside the function since its a functional Hook.
Then I created an instance of it and store it in a constant called nameInput.

In the Input element, react has a prop called ref which references a pointer, our pointer in this case is the name of our instantiated hook, which is called nameInput.

nameInput returns an object that contains the current property which also contain the value property that holds the value of the input

The nameValue constant contains the value of our input element when rendered but will do this once and not after each keystroke.