{"id":20587,"date":"2022-10-10T06:11:57","date_gmt":"2022-10-10T13:11:57","guid":{"rendered":"https:\/\/coderpad.io\/?p=20587"},"modified":"2023-06-05T14:02:33","modified_gmt":"2023-06-05T21:02:33","slug":"redux-vs-recoil","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/redux-vs-recoil\/","title":{"rendered":"Redux vs Recoil – Comparing Two React State Libraries"},"content":{"rendered":"\n

State management is indispensable when building medium to large-scale React projects due to the large number of components that must be able to communicate with each other efficiently. Also, these large projects may have logic implemented on the front end that requires a global application state.<\/p>\n\n\n\n

Luckily, in addition to the state management solutions and features shipped with React, there are specialized libraries built for managing state in React applications.<\/p>\n\n\n\n

We\u2019ll take look at two popular options out of the many libraries out there\u2014Redux and Recoil\u2014and show you how to implement them.<\/p>\n\n\n\n

What is a state management library?<\/h2>\n\n\n\n

A state management library provides a structure and functionalities for modeling and accessing the global application state. Data is centralized in one location, usually a \u201cstore\u201d where every component can access that data, set values, and monitor for changes.<\/p>\n\n\n\n

Without state management, components will be unable to get data contained in other components without the use of something like \u201cprop drilling<\/a>\u201d.<\/p>\n\n\n

\n
\"Diagram<\/a><\/figure>\n<\/div>\n\n\n

With state management, however, every component can have access to and write to the same application state.<\/p>\n\n\n

\n
\"Diagram<\/a><\/figure>\n<\/div>\n\n\n

Next, let\u2019s look at how we can use state management libraries like Redux and Recoil to manage state in our React applications.<\/p>\n\n\n\n

Redux<\/h2>\n\n\n\n

According to the Redux docs<\/a>, \u201cRedux is a pattern and library for managing and updating application state, using events called \u2018actions\u2019.\u201d<\/strong> It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.<\/p>\n\n\n\n

Here are a few things the Redux documentation<\/a> wants us to know before we proceed.<\/p>\n\n\n\n

Why use Redux?<\/h3>\n\n\n\n

Redux manages the “global” application state – a state that is accessible across many parts of your application.<\/p>\n\n\n\n

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur<\/strong>.<\/p>\n\n\n\n

Redux is more useful when:<\/p>\n\n\n\n

    \n
  • The app state is needed in numerous locations throughout the app and is regularly updated over time.<\/li>\n\n\n\n
  • The logic to update that state may be sophisticated.<\/li>\n\n\n\n
  • The app has a medium-to-large scaled codebase and might be worked on by many people.<\/li>\n<\/ul>\n\n\n\n

    Not all applications require Redux. Spend some time considering the type of app you’re creating and deciding which tools would be most helpful in resolving the issues you’re working on.<\/strong><\/p>\n\n\n\n

    Now that that\u2019s out of the way, let\u2019s set up Redux in a React application.<\/p>\n\n\n\n

    Redux components and terminology<\/h3>\n\n\n\n

    Redux Store, Action, and Reducer are the three main parts of Redux.<\/p>\n\n\n\n

    Redux Store <\/strong>is the \u201cbrain\u201d of our state management structure. <\/p>\n\n\n\n

    It manages the state and dispatches Actions<\/p>\n\n\n\n

    Dispatch<\/strong> is a method in the Redux store. The state can only be updated by calling store.dispatch()<\/code> and providing an action object.<\/p>\n\n\n\n

    Action<\/strong> refers to the commands passed to the Reducers, which can be interpreted by it. It stores information regarding the user’s actions.  There is a type and a payload in the action. The payload contains the actual data provided by the action, whereas the type is only a string with the action name.<\/p>\n\n\n\n

    Reducers<\/strong> are functions that read the instructions sent by the Action and update the store using the state. Reducers specify how the application’s state will change in response to the actions sent to the store.<\/p>\n\n\n\n

    We will use a counter application as a case study as we move on, to discuss how to set up and use Redux in an app.<\/p>\n\n\n\n

    Install and setup Redux<\/h3>\n\n\n\n

    Add Redux Toolkit and React Redux packages to your project:<\/p>\n\n\n

    npm<\/span> install<\/span> @reduxjs<\/span>\/toolkit react-redux<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Create a Redux Store<\/h3>\n\n\n\n
    Create a new file – .\/src\/store\/index.js.<\/code> <\/p>\n\n\n
    \/\/ .\/src\/store\/index.js<\/span>\n\nimport<\/span> { configureStore } from<\/span> '@reduxjs\/toolkit'<\/span>\n\nexport<\/span> default<\/span> configureStore({\n\u00a0 reducer<\/span>: {},\n})<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here, we import the configureStore<\/code> API from Redux Toolkit and create an empty Redux store, and export it.<\/p>\n\n\n\n
    This creates a Redux store with an empty reducer<\/code> function. Next, we\u2019ll have to make the store accessible for the rest of our React application.<\/p>\n\n\n\n
    Provide Redux store to the application<\/h3>\n\n\n\n
    We can make the newly created store available to our React components by importing and wrapping the React Redux <Provider><\/code> over the application. We\u2019ll do all that in the .\/src\/index.js<\/code> file.<\/p>\n\n\n
    .\/src\/index.js\n\nimport<\/span> { StrictMode } from<\/span> \"react\"<\/span>;\nimport<\/span> { createRoot } from<\/span> \"react-dom\/client\"<\/span>;\n\n\/\/ import Provider<\/span>\nimport<\/span> { Provider } from<\/span> \"react-redux\"<\/span>;\n\n\/\/ import store<\/span>\nimport<\/span> store from<\/span> \".\/store\/index\"<\/span>;\nimport<\/span> App from<\/span> \".\/App\"<\/span>;\nconst<\/span> rootElement = document<\/span>.getElementById(\"root\"<\/span>);\nconst<\/span> root = createRoot(rootElement);\nroot.render(\n\n\u00a0 \/\/ wrap application with Provider<\/span>\n\u00a0 <Provider<\/span> store<\/span>={store}<\/span>><\/span>\n\u00a0 \u00a0 <StrictMode<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <App<\/span> \/><\/span>\n\u00a0 \u00a0 <\/StrictMode<\/span>><\/span>\n\u00a0 <\/Provider<\/span>><\/span><\/span>\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Create Redux state slice(s)<\/h3>\n\n\n\n
    We\u2019ll create redux state slices for two pieces of state: booksSlice<\/code> and savedBooksSlice<\/code>. <\/p>\n\n\n\n
    Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.<\/p>\n\n\n\n
    First, create a slice for our books array state in a new file: .\/src\/store\/books\/booksSlice.js<\/code>:<\/p>\n\n\n
    \/\/ .\/src\/store\/books\/booksSlice.js<\/span>\n\nimport<\/span> { createSlice } from<\/span> \"@reduxjs\/toolkit\"<\/span>;\nexport<\/span> const<\/span> booksSlice = createSlice({\n\u00a0 name<\/span>: \"books\"<\/span>,\n\u00a0 initialState<\/span>: {\n\u00a0 \u00a0 value<\/span>: [\n\u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 id<\/span>: \"001\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 title<\/span>: \"Harry Potter and the Deathly Hallows\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 price<\/span>: 5.0<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 rating<\/span>: \"5.0\"<\/span>\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 id<\/span>: \"002\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 title<\/span>: \"Harry Potter and the Goblet of Fire\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 price<\/span>: 5.0<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 rating<\/span>: \"4.8\"<\/span>\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 ]\n\u00a0 },\n\u00a0 reducers<\/span>: {\n\u00a0 \u00a0 set<\/span>: (state, action<\/span>) =><\/span> {\n\u00a0 \u00a0 \u00a0 return<\/span> action.payload;\n\u00a0 \u00a0 }\n\u00a0 }\n});\n\n\/\/ Action creators are generated for each case reducer function<\/span>\nexport<\/span> const<\/span> { set<\/span> } = booksSlice.actions;\n\nexport default booksSlice.reducer;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here, we import the createSlice<\/code> API from Redux Toolkit and export booksSlice<\/code>, and define the name<\/code>, initialState<\/code>, and reducers<\/code> using createSlice<\/code>.<\/p>\n\n\n\n
    Next, we\u2019ll create a state slice for savedBooks<\/code>. Create a new file: .\/src\/store\/books\/booksSlice.js<\/code>:<\/p>\n\n\n
    \/\/ .\/src\/store\/books\/booksSlice.js<\/span>\n\nimport<\/span> { createSlice } from<\/span> \"@reduxjs\/toolkit\"<\/span>;\nexport<\/span> const<\/span> savedBooksSlice = createSlice({\n\u00a0 name<\/span>: \"savedBooks\"<\/span>,\n\u00a0 initialState<\/span>: [],\n\u00a0 reducers<\/span>: {\n\u00a0 \u00a0 add<\/span>: (state, action<\/span>) =><\/span> {\n\u00a0 \u00a0 \u00a0 \/\/ get the payload object from by destructuring the action parameter<\/span>\n\u00a0 \u00a0 \u00a0 \/\/\u00a0 assign value of payload to book<\/span>\n\u00a0 \u00a0 \u00a0 const<\/span> { payload<\/span>: book } = action;\n\u00a0 \u00a0 \u00a0 return<\/span> [...state, book];\n\u00a0 \u00a0 },\n\u00a0 \u00a0 remove<\/span>: (state, action<\/span>) =><\/span> {\n\u00a0 \u00a0 \u00a0 \/\/ get the payload object from by destructuring the action parameter<\/span>\n\u00a0 \u00a0 \u00a0 \/\/\u00a0 assign value of payload to bok<\/span>\n\u00a0 \u00a0 \u00a0 const<\/span> { payload<\/span>: book } = action;\n\u00a0 \u00a0 \u00a0 const<\/span> bookIndex = state.findIndex((x<\/span>) =><\/span> x.title === book.title);\n\u00a0 \u00a0 \u00a0 \/\/ if no match, return the previous state<\/span>\n\u00a0 \u00a0 \u00a0 if<\/span> (bookIndex < 0<\/span>) return<\/span> state;\n\u00a0 \u00a0 \u00a0 \/\/ avoid mutating the original state, create a copy<\/span>\n\u00a0 \u00a0 \u00a0 const<\/span> stateUpdate = [...state];\n\u00a0 \u00a0 \u00a0 \/\/ then splice it out from the array<\/span>\n\u00a0 \u00a0 \u00a0 stateUpdate.splice(bookIndex, 1<\/span>);\n\u00a0 \u00a0 \u00a0 return<\/span> stateUpdate;\n\u00a0 \u00a0 }\n\u00a0 }\n});\n\n\/\/ Action creators are generated for each case reducer function<\/span>\nexport<\/span> const<\/span> { add, remove } = savedBooksSlice.actions;\n\nexport<\/span> default<\/span> savedBooksSlice.reducer;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Next, we\u2019ll make these state slices global by importing them into our store.<\/p>\n\n\n\n
    Add slice reducers to the store<\/h3>\n\n\n\n
    Now, we need to import the reducer functions from the state slices and add it to our store. Back in .\/src\/store\/index.js<\/code>:<\/p>\n\n\n
    \/\/ .\/src\/store\/index.js<\/span>\n\nimport<\/span> { configureStore } from<\/span> \"@reduxjs\/toolkit\"<\/span>;\nimport<\/span> savedBooksReducer from<\/span> \".\/books\/savedBooksSlice\"<\/span>;\nimport<\/span> booksReducer from<\/span> \".\/books\/booksSlice\"<\/span>;\nexport<\/span> default<\/span> configureStore({\n\u00a0 reducer<\/span>: {\n\u00a0 \u00a0 books<\/span>: booksReducer,\n\u00a0 \u00a0 savedBooks<\/span>: savedBooksReducer\n\u00a0 }\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now that we\u2019ve configured our store, let’s use our state in our components<\/p>\n\n\n\n
    Use Redux state and actions in React components<\/h3>\n\n\n\n
    Now we can use the React Redux hooks to let React components interact with the Redux store. We can read the data from the store with useSelector<\/code>, and dispatch actions using useDispatch<\/code>. <\/p>\n\n\n\n
    First, in .\/src\/SavedBooks.js<\/code> component, we\u2019ll use useSelector<\/code> to read the savedBooks<\/code> data.<\/p>\n\n\n
    import<\/span> React from<\/span> \"react\"<\/span>;\nimport<\/span> { useSelector } from<\/span> \"react-redux\"<\/span>;\nexport<\/span> function<\/span> SavedBooks<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> savedBooks = useSelector((state<\/span>) =><\/span> state.savedBooks);\n\u00a0 \/\/ function to get total price from savedbooks array<\/span>\n\u00a0 const<\/span> getTotalPrice = (savedBooks<\/span>) =><\/span> {\n\u00a0 \u00a0 const<\/span> totalPrice = savedBooks.reduce(\n\u00a0 \u00a0 \u00a0 (totalCost, item<\/span>) =><\/span> totalCost + item.price,\n\u00a0 \u00a0 \u00a0 0<\/span>\n\u00a0 \u00a0 );\n\u00a0 \u00a0 return<\/span> totalPrice;\n\u00a0 };\n\u00a0 return<\/span> (\n\u00a0 \u00a0 <header<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <p<\/span>><\/span> No. of Books: {savedBooks.length} <\/p<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <p<\/span>><\/span> Total price: ${getTotalPrice(savedBooks)} <\/p<\/span>><\/span>\n\u00a0 \u00a0 <\/header<\/span>><\/span><\/span>\n\u00a0 );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Next, we\u2019ll use useSelector<\/code> and useDispatch<\/code> to read and update the books<\/code> and savedBooks<\/code> state respectively in the .\/src\/Books.js<\/code> component.<\/p>\n\n\n\n
    To dispatch the actions add<\/code> and remove<\/code> we need to import the actions and use the useDispatch<\/code> hook provided by react-redux to dispatch our actions.<\/p>\n\n\n
    \/\/ .\/src\/Books.js<\/span>\n\nimport<\/span> React from<\/span> \"react\"<\/span>;\nimport<\/span> { useSelector, useDispatch } from<\/span> \"react-redux\"<\/span>;\nimport<\/span> { add, remove } from<\/span> \".\/store\/books\/savedBooksSlice\"<\/span>;\nexport<\/span> function<\/span> Books<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> dispatch = useDispatch();\n\u00a0 const<\/span> books = useSelector((state<\/span>) =><\/span> state.books.value);\n\u00a0 return<\/span> (\n\u00a0 \u00a0 <div<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <ul<\/span> className<\/span>=\"Books\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 {books.map((book) => {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return (\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li<\/span> className<\/span>=\"book\"<\/span> key<\/span>={book.title}<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <header<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h3<\/span>><\/span> {book.title} <\/h3<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p<\/span>><\/span>Rating: {book.rating} <\/p<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p<\/span>><\/span> ${book.price} <\/p<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/header<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button<\/span> onClick<\/span>={()<\/span> =><\/span> dispatch(add(book))}> Add <\/button<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button<\/span> onClick<\/span>={()<\/span> =><\/span> dispatch(remove(book))}> Remove <\/button<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/li<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 );\n\u00a0 \u00a0 \u00a0 \u00a0 })}\n\u00a0 \u00a0 \u00a0 <\/ul<\/span>><\/span>\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\u00a0 );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\t