In this blog, You will learn What React's Context API is and how to use React's Context API. It is very much used as a state management tool, oftentimes replacing Redux.
\nAccording to the React doc:
\n\nContext provides a way to pass data through the component tree\nwithout having to pass props down manually at every level.
\n
To be more clear, this provides a way for you to make values available to all components of your application, no matter how complicated your application is.
\nconst App = () => {\n return(\n <ParentClass color= "blue"/>\n );\n}\n\nconst ParentClass = (props) => (\n <ChildClass color= {props.color} />\n)\n\nconst ChildClass = (props) => (\n <GrandChildClass color= {props.color} />\n)\n\nconst GrandChildClass = (props) => (\n <p>Color: {props.color}</p>\n)In the above code, we designed the application in which used color props in the ParentClass and passed that props to all component (top to down) without checking that it is required by the child class or not and another issue also here that in case if GrandChildClass component was more deeply nested than it was very difficult to manage. This is the problem that Context solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme.
Using context, we can avoid passing props. Let's create the above example code using context:
\nWe will create a separate component for context that we can use throughout the components.\nOnce you have initialized your project, create a file called ColorContext.js in your /src folder.
Using React.createContext, we can create context and pass anything as an argument to React.createContext. In our case, we are passing \"white\" color to provide a light theme.
This will also give me ColorContext.Provider and ColorContext.Consumer. What these two components do is straightforward:
import React from \"react\";
\nconst ColorContext = React.createContext(\"white\");\nexport default ColorContext;
\nTo use this context all over the components, we have to use the provider. According to React document, every context object comes with a Provider React component that allows consuming components to subscribe to context changes.
\nAfter successfully creating context, we can import context and use it to create our provider.\nAs we want to access context in the entire application, we need to wrap our app in ColorContext.Provider.
import ColorContext from './ColorContext';\n function App() {\n const color= "white";\n return (\n <ColorContext.Provider value = {color}>\n <div className="App">\n <header className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h1 className="App-title">Welcome to my web page</h1>\n </header>\n </div>\n </ColorContext.Provider>\n );\n }The approach to providing context is the same for class and functional components but consuming is a little different for both.
\nMainly used way to accessing context in class component using static contextType. After that, you can access the context value using this.context. You can refer to it in any lifecycle method and even in the render method.
import ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n componentDidMount() {\n const colorValue= this.context\n\n console.log(colorValue) // "white" \n }\n\n render() {\n return <div>Color Value is {colorValue} </div>\n }\n}The traditional way to accessing context values is by wrapping the child component in Consumer. From there, You can access values as props.
import { ColorContext} from './ColorContext'\n\nclass Page extends Component {\n render() {\n return (\n <ColorContext.Consumer>\n {(props) => {\n return <div>{props}</div>\n }}\n </ColorContext.Consumer>\n )\n }\n} You can use useContextin functional components and its equivalent of static contextType. \t
import React, { useContext } from 'react'\nimport ColorContextfrom './ColorContext'\n\nexport const HomePage = () => {\n const colorValue= useContext(ColorContext)\n\n return <div>{ColorContext}</div>\n}We can update the context by updating the normal state. We just need to create a wrapper class that contains the state of context and the method to update it.\nExample code with file ColorContext.js
import React, { Component } from 'react'\n\nconst ColorContext = React.createContext()\n\nclass ColorContextProvider extends Component {\n // Context state\n state = {\n color:""\n }\n\n // Method to update state\n setColor = (color) => {\n this.setState((prevState) => ({ color}))\n }\n\n render() {\n const { children } = this.props\n const { color } = this.state\n\n\n return (\n <ColorContext.Provider\n value={{\n color,\n this.setColor,\n }}\n >\n {children}\n </ColorContext.Provider>\n )\n }\n}\n\nexport default ColorContext\n\nexport { ColorContextProvider }Now you can update and view the user from the Context method.
\nimport ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n render() {\n const { color, setColor } = this.context\n\n return (\n <div>\n <button\n onClick={() => {\n const newColorValue= "black";\n\n setColor (newColorValue)\n }}\n >\n Update Color\n </button>\n <p>{`Current Color Value: ${color}`}</p>\n </div>\n )\n }\n}In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it?
\nThe problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. **
\nThis means that if you're consuming your context everywhere in your app, or worse, using one context for the state of your entire app, you'll end up re-rendering a ton everywhere.
\n","frontmatter":{"date":"June 09, 2021","updated_date":null,"title":"React's Context API Guide with Example","tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png","srcSet":"/static/157af7ff069ab273224b4718433d9790/69585/title-image.png 200w,\n/static/157af7ff069ab273224b4718433d9790/497c6/title-image.png 400w,\n/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png 800w,\n/static/157af7ff069ab273224b4718433d9790/f3583/title-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/introduction-to-redux-saga/"},"html":"Redux Saga is a middleware library used to allow a Redux store to interact with resources outside of itself asynchronously. This includes making HTTP requests to external services, accessing browser storage, and executing I/O operations. These operations are also known as side effects. Redux Saga helps to organize these side effects in a way that is easier to manage.
\nA redux store natively only knows how to dispatch actions and update its state using its root reducer. Actions represent an event describing something happening in your application and an intention to change your application's state. A reducer accumulates values from or stemming from dispatched actions and accumulates these values into the newly updated state of your application.
\nReducers must be written as a pure function, as it is necessary to enable useful features of Redux such as time travel (replaying past actions). Actions are simply objects passed on into the reducer and are naturally deterministic. Thus we have a problem; there isn't any place in your Redux application to put your side effects in.
\nA Redux middleware lies between an action and a reducer. This enables actions to contain something else other than a plain object, as long as the middleware intercepts this, performs its logic, and returns a plain object to pass along to the reducer.
\nRedux Thunk, a common alternative to Redux Saga, allows functions to be passed into the Redux store dispatch, which checks to see if it is a function or an action object, executing the function in the former case, and directly passing along the action object to the reducer in the latter case. These functions can then perform whatever complex asynchronous logic that it wants and produce a plain action object to be then passed into the reducer.
\nRedux Sagas are slightly different in that a separate set of actions are defined in your Redux application, which is captured exclusively by watcher functions (as part of your saga). Upon capturing the action, the saga will execute the corresponding logic and dispatch a resultant action to your application's reducer. The saga essentially acts as a separate thread to your application, listening for specific actions from your main application to perform complex asynchronous tasks and updating your application's state once it is completed.
\nWhile I wouldn't say Redux Saga is inherently better than any of the alternatives available, it does have a few benefits that might make you want to consider using it.
\nRedux Saga offers a place completely decoupled from your action creators for you to handle your application's side effects. Some people may feel that this makes your application's data flow harder to follow (which I would agree with), but I think that this decoupling makes organizing your codebase and extending functionality easier down the road.
\nFor example, in a situation where you might need to support a workflow that requires multiple HTTP requests to different services in a particular order, Redux Saga allows you to compose granular sagas into a single one and represent this new high-level function with a separate action. Your application can still access each individual HTTP resource in other workflows, but for this particular one, your React component can simply call this high-level action to load whatever it needs from a single place. As far as your component is concerned, your asynchronous logic to load multiple resources in a particular order is abstracted away.
\nRedux Saga also offers us a collection of helper functions that are used to spawn your tasks when some specific actions are dispatched. These can be used to help organize when and how your tasks are executed.
\nFor example, one of the most commonly used helper functions is takeEvery(). This instructs the middleware to spawn a new task for every action dispatched to your store matching a given pattern. This provides a behaviour similar to Redux Thunk and is as simple as it gets: \"Application tells you to fetch something, go fetch it\".
Now imagine that you had two functionally independent components that needed to retrieve the most up to date data from the same place. Previously they existed on two different pages and could both be visited at any time. It would make sense for both components to try to retrieve a fresh copy of the resource whenever it is visited. Now imagine that your specification has changed, and now the two components need to exist on the same page. Now you have a situation where two different components are redundantly spawning the same task.
\nObviously, you could rewrite one of the components to no longer try to retrieve a fresh copy and rely on the other to create the necessary action to retrieve this resource and populate the application store. Or you could add some logic to ensure that your component does not try to create a new action to retrieve this resource if this resource is already being loaded. But this could also be solved using another Redux Saga helper function: take(). This function instructs the middleware to spawn a new task for an action dispatched matching a given pattern but will effectively ignore any new actions until the spawned task has been completed.
With this, your two independent components can coexist together without changing any component-specific logic! As far as your component is concerned, it asks your saga to retrieve a resource on its behalf and retrieves it from the resultant updated state. Your saga gets to decide how it wants to handle two requests from different components.
\nThere is a fair bit more to Redux Saga than I managed to cram into this post. If you're interested in incorporating it into your project or want to know more, check out their fantastic documentation here: Redux-saga. It's packed full of useful examples if you'd like to get into the low-level details.
\nRedux Saga is one of many tools that can help you handle your application's side effects. It's heavy and has a learning curve but contains a lot of functionality that will help keep your codebase neat and modular.
\n","frontmatter":{"date":"November 23, 2020","updated_date":null,"title":"Introduction to Redux Saga","tags":["React","Redux","Redux Saga"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/08b61adc0e5e69207ac4c62a11d05aa6/ee604/unsplash.png","srcSet":"/static/08b61adc0e5e69207ac4c62a11d05aa6/69585/unsplash.png 200w,\n/static/08b61adc0e5e69207ac4c62a11d05aa6/497c6/unsplash.png 400w,\n/static/08b61adc0e5e69207ac4c62a11d05aa6/ee604/unsplash.png 800w,\n/static/08b61adc0e5e69207ac4c62a11d05aa6/f3583/unsplash.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Chim","github":"nickc95","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/react-context-api/"},"html":"React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project. The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application.
\nThe React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to \"prop drilling\" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.
\nTalking about the Context APIs, they’re a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.
\nReact.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's names suggests provides the state to its children. It will hold the \"store\" and be the parent of all the components that might need that store. Apart from the react context Provider, Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page
\nNo. Well, not entirely.
\nRedux is great and came perfectly to answer the need for state management. Actually, it answered this need so well that it came to be known that you can't be a \"true\" React developer if you don't know your way around Redux.\nHowever, Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't:
\nSimplicity - When using redux people tend to manage almost all of their state in redux and it causes 2 problems:
\nRedux is just a concept. If you are comfortable with using reducers and actions and don't find hindering than you may also create reducers and actions that wrap Context API as the store as Redux's author Dan Abramov explained in his medium article about whether Redux is always required
\nYou might think to yourself: \"Well, I'm convinced. How do I implement Context API in react for my app?\" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps:
\nimport React, { createContext } from "react";\nconst UserContext = createContext();const UserProvider = ({ children }) => {\n const [name, setName] = useState("John Doe");\n const [age, setAge] = useState(1);\n const happyBirthday = () => setAge(age + 1);\n return (\n <UserContext.Provider value={{ name, age, happyBirthday }}>\n {children}\n </UserContext.Provider>\n );\n};const withUser = (Child) => (props) => (\n <UserContext.Consumer>\n {(context) => <Child {...props} {...context} />}\n {/* Another option is: {context => <Child {...props} context={context}/>}*/}\n </UserContext.Consumer>\n);The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient).
\nexport { UserProvider, withUser };ReactDOM.render(\n <UserProvider>\n <App />\n </UserProvider>,\n document.getElementById("root")\n);export default withUser(LoginForm);You'll also be able to notice I used the new \"Hooks\" feature that is shipped with React since version 16.8 to make it even neater and easier to create contexts.
\nI mentioned how people overuse Redux, and it also applies to Context API. Use it only when you need to share state between lot's of components with a lot of nesting.\nMost of the time, the data you have in one component will only be relevant to its children, so passing it in props is more indicative and nicer.
\n","frontmatter":{"date":"October 07, 2020","updated_date":null,"title":"React Context API: What is it and How it works?","tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5151515151515151,"src":"/static/caf00c33b55e22e63d32a724e11eea7d/14b42/react.jpg","srcSet":"/static/caf00c33b55e22e63d32a724e11eea7d/f836f/react.jpg 200w,\n/static/caf00c33b55e22e63d32a724e11eea7d/2244e/react.jpg 400w,\n/static/caf00c33b55e22e63d32a724e11eea7d/14b42/react.jpg 800w,\n/static/caf00c33b55e22e63d32a724e11eea7d/47498/react.jpg 1200w,\n/static/caf00c33b55e22e63d32a724e11eea7d/0226d/react.jpg 1499w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Eylon Ronen","github":"eylonronen","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/angular-state-management-with-ngxs/"},"html":"In this article, we will learn about state management in Angular with NGXS. Here we will understand the basic concept of NGXS and create a simple TO-DO App.
\nIn the bigger apps, managing the data states is very complicated. In angular, each component has its own state, to share the data/state between the components we normally use @Input and @Output decorators, but when the application goes bigger, its challenging to maintain the data consistency. So to solve this problem, redux was introduced. It provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another.
\nNGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators. NGXS is very simple to use as compared to other state management patterns like redux and Akita. NGXS takes full advantage of angular and typescript over the redux pattern.\nThere are majors 4 concepts to NGXS It is a global state container and manages the states of the application.We can dispatch the actions to perform certain operations. An action is a type of command which should be called when something happens or you want to trigger at any event like adding a new todo, listing todos etc. States are classes along with decorators to describe metadata and action mappings. Selects are functions that slice a specific portion of the state from the global state container i.e. to get the data from the specific global state whenever you want to use. Install the Here we have created a component that dispatches actions to create a to-do and for other operations. Apart from that, we are using a selector Put this code in the Create a folder Here we have created the state of the todo, it contains the global state of the todo list.\nCreate a folder Here we have created a form that we use to create todo and listed all todos.\nput this code in your After lots of code, it's time to see the results. So here is the UI you will get. To get the complete code please go to Github Repo.\n We have gone through the basic concepts of NGXS and built a simple to-do app. There are a lot of advanced features and plugins by NGXS, but beyond the scope, we could not add, but hopefully, we will be exploring in future blogs. Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the complexity which is why some developers use React hooks and others use state management libraries such as Redux. In this post, We are going to take a closer look at both React hooks and Redux to manage the state. React components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings. The state is just a fancy term for a JavaScript data structure. If a user changes state by interacting with your application, the UI may look completely different afterwards, because it's represented by this new state rather than the old state. Make a state variable responsible for one concern to use efficiently. React applications are built using components and they manage their state internally and it works well for applications with few components, but when the application grows bigger, the complexity of managing states shared across components becomes difficult. Here is a simple example of an e-commerce application, in which the status of multiple components will change when purchasing a product. If developers do not have scalability in mind then it is really hard to find out what is happening when something goes wrong. This is why you need state management in your application. Let’s discuss how to use react state management using react hooks and redux Redux was created to resolve this particular issue. it provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another. Here is a simple view of how Redux works. There are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does. Actions are payloads of information that send data from your application to your store. Actions are sent using Here is an example of its action creator: Reducers specify how the application's state changes in response to actions sent to the store.\nAn example of how Reducer works in Redux is as follows: The store holds the application state. You can access stored state, update the state, and register or unregister listeners via helper methods. Let’s create a store for our TODO app: In other words, Redux gives you code organization and debugging superpowers. This makes it easier to build more maintainable code, and much easier to track down the root cause when something goes wrong. These are functions that hook you into React state and features from function components. Hooks don't work inside classes and it allows you to use React features without writing a class. Hooks are backwards-compatible, which means it doesn't keep any breaking changes. React provides some built-in Hooks like Please see the following examples of some react hooks as follows: In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the We declare a state variable called count and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount. Example of useReducer: useReducer creates an independent component co-located state container within your component. Whereas Redux creates a global state container that hangs somewhere above your entire application. Below an example of todo items is completed or not using the useReducer react hook. See the following function which is a reducer function for managing state transitions for a list of items: There are two types of actions which are equivalent to two states. they used to toggle the complete boolean field and additional payload to identify incoming action. The state which is managed in this reducer is an array of items: In code, The useReducer hook is used for complex state and state transitions. It takes a reducer function and an initial state as input and returns the current state and a dispatch function as output Complete file: Let’s do a similar example with Redux. Store in App.js. Actions in actions/index.js. Reducers in reducers/index.js. FIle components/Todo.js React offers react hooks which can be used as an alternative for But for large applications, you can use both redux and react hooks. it works great! React Hook is a useful new feature, and the addition of React-Redux with Redux-specific hooks is a great step towards simplifying Redux development.How NGXS works:
\n1. Store:
\n
\n this.store.dispatch(new TodoActions.AddTodo(form));2. Actions
\n
\nexport class AddTodo {\n static readonly type = '[Todo] Add';\n constructor(public payload: ITodo) { }\n}3. State
\n
\nimport { Injectable } from '@angular/core';\nimport { State } from '@ngxs/store';\n\n@State<ITodoStateModel[]>({\n name: 'todoList',\n defaults: {\n todoList: [],\n },\n})\n@Injectable()\nexport class TodoState {}4. Select
\n
\n @Select(TodoState) todoList$: Observable<ITodo>;Let's build a To-Do App:
\n1. Get started
\nnpm install @ngxs/store --save then import the below code in app.module.ts
\n//File name app.module.ts\nimport { NgxsModule } from '@ngxs/store';\n@NgModule({\n imports: [\n NgxsModule.forRoot([ToDoState], { // here login state \n developmentMode: !environment.production\n })\n ]\n})\nexport class AppModule {}2. Create your store
\nTodoState, from which we are listening for the updated to-do list.app.component.ts
\n// File name app.component.ts\nimport { Component } from '@angular/core';\nimport { Store, Select } from '@ngxs/store';\nimport { TodoActions } from './state/todo-actions';\nimport { FormGroup, FormControl, Validators } from '@angular/forms';\nimport { TodoState, ITodo } from './state/todo-state';\nimport { Observable } from 'rxjs';\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n title = 'ngxs-todo-app';\n\n @Select(TodoState) todoList$: Observable<ITodo>;\n\n addForm = new FormGroup({\n title: new FormControl('', [Validators.required])\n });\n constructor(private store: Store){}\n onSubmit(form: any){\n this.store.dispatch(new TodoActions.AddTodo(form));\n }\n markDone(id: string, is_done: boolean){\n this.store.dispatch(new TodoActions.markDone(id, is_done));\n }\n}3. Create your actions
\nstate and put the todo-actions.ts file and add below code
\n// File name todo-actions.ts\nexport class AddTodo {\n static readonly type = '[Todo] Add';\n constructor(public payload: any) { }\n}\n\nexport class EditTodo {\n static readonly type = '[Todo] Edit';\n constructor(public payload: any) { }\n}\n\nexport class FetchAllTodos {\n static readonly type = '[Todo] Fetch All';\n}\n\nexport class DeleteTodo {\n static readonly type = '[Todo] Delete';\n constructor(public id: number) { }\n}4. Create your State:
\nstate and put the todo-state.ts file and add below code
\n// File name todo-state.ts\nimport { Injectable } from '@angular/core';\nimport { State, NgxsOnInit, Action, StateContext } from '@ngxs/store';\nimport { TodoActions } from './todo-actions';\nimport { patch, updateItem } from '@ngxs/store/operators';\n\nexport interface ITodo {\n id: string;\n title: string;\n is_done: boolean;\n}\nexport interface ITodoStateModel {\n todoList: ITodo[];\n}\n@State<ITodoStateModel>({\n name: 'todoList',\n defaults: {\n todoList: [],\n },\n})\n@Injectable()\nexport class TodoState implements NgxsOnInit {\n ngxsOnInit(ctx) {\n ctx.dispatch(new TodoActions.FetchAllTodos());\n }\n @Action(TodoActions.markDone)\n markDone(\n ctx: StateContext<ITodoStateModel>, \n { payload, is_done }: TodoActions.markDone\n ) {\n ctx.setState(\n patch({\n todoList: updateItem(\n (item: ITodo) => item.id === payload, \n patch({ is_done: !is_done })\n )\n })\n );\n }\n\n @Action(TodoActions.AddTodo)\n add(\n ctx: StateContext<ITodoStateModel>,\n { payload }: TodoActions.AddTodo,\n ) {\n const state = ctx.getState();\n ctx.setState({\n ...state,\n todoList: [\n ...state.todoList,\n {\n ...payload,\n id: Math.random().toString(36).substring(7),\n is_done: false\n }\n ],\n }\n );\n }\n\n}5. Create your html view
\napp.component.html
\n<!-- File name app.component.html -->\n<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">\n <input type="text" formControlName="title" class="form-control todo-list-input" placeholder="What do you need to do today?">\n <button class="add btn btn-primary font-weight-bold todo-list-add-btn">Add</button> \n</form>\n<ul class="d-flex flex-column-reverse todo-list">\n <li *ngFor="let todo of (todoList$ | async) ?. todoList" [ngClass]="{'completed': todo.is_done}">\n <div class="form-check"> \n <label class="form-check-label"> \n <input (click)="markDone(todo.id, todo.is_done)" class="checkbox" type="checkbox" [checked]="todo.is_done">{{todo.title}} <i class="input-helper"></i></label> \n </div>\n </li>\n </ul>Conclusion
\nWhat is React State Management?
\n\n
\nWhy do you need React state management?
\n\n
\nWhat is Redux?
\nActions in Redux
\nstore.dispatch(). Actions are created via an action creator.\nHere is an example action that represents adding a new todo item:
\n{ \ntype: "ADD_TODO", \npayload: {text:"Hello Foo"}\n }
\nocnst addTodo = (text) => {\n return {\n type: "ADD_TODO",\n text\n };\n}Reducers in Redux
\n
\n const TODOReducer= (state = {}, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n};Store in Redux
\n
\nconst store = createStore(TODOReducer);What is React Hook?
\nuseState, UseEffect and useReducer etc. You can also make custom hooks.React Hook Rules
\n\n
\nWhat is useState and how to use it
\nuseState is a Hook that Lets you add React state to function components.\nExample:\nDeclaring a State Variable in class and initialize count state with 0 by setting this.state to {count:0}.
\nclass Example extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n useState Hook directly inside our component:
\nfunction Example() {\n const [count, setCount] = useState(0);\n}what is useReducer and how to use it
\nuseReducer is a hook I use sometimes to manage the state of the application. It is very similar to the useState hook, just more complex. useReducer hook uses the same concept as the reducers in Redux. It is basically a pure function, with no side-effects.
\n +----------------+ +----------------+\n | Component A | | |\n | | | |\n | | | Redux |\n +----------------+ | |\n | connect Redux |<-------------| |\n +--------+-------+ +--------+-------+\n | |\n +---------+-----------+ |\n | | |\n | | |\n+--------+-------+ +--------+-------+ |\n| Component B | | Component C | |\n| | | | |\n| | | | |\n+----------------+ +----------------+ |\n| useReducer | | connect Redux |<----------+\n+----------------+ +--------+-------+\n |\n +--------+-------+\n | Component D |\n | |\n | |\n +----------------+
\n const todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n };
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n ];
\n const [todos, dispatch] = React.useReducer(\n todoReducer,\n initialTodos\n );
\nimport React from "react";\n\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\nconst App = () => {\n const [todos, dispatch] = React.useReducer(todoReducer, initialTodos);\n\n const handleChange = todo => {\n dispatch({\n type: todo.complete ? "REMOVE_TODO" : "ADD_TODO",\n id: todo.id\n });\n };\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default App;
\nimport React from "react";\nimport { Provider } from "react-redux";\nimport { createStore } from "redux";\nimport rootReducer from "./reducers";\nimport Todo from "./Components/TODO";\nconst store = createStore(rootReducer);\n\nfunction App() {\n return (\n <div className="App">\n <Provider store={store}>\n <Todo />\n </Provider>\n </div>\n );\n}\n\nexport default App;
\nexport const addTodo = id => ({\n type: "ADD_TODO",\n id\n});\n\nexport const removeTodo = id => ({\n type: "REMOVE_TODO",\n id\n});
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todos = (state = initialTodos, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\n\nexport default todos;
\nimport React from "react";\nimport { connect } from "react-redux";\nimport { addTodo, removeTodo } from "../../redux/actions/authActions";\n\nconst Todo = ({ todos, addTodo, removeTodo }) => {\n const handleChange = todo => {\n if (todo.complete) {\n removeTodo(todo.id);\n } else {\n addTodo(todo.id);\n }\n };\n\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nconst mapStateToProps = state => ({ todos: state.auth.todos });\nconst mapDispatchToProps = dispatch => {\n return {\n addTodo: id => dispatch(addTodo(id)),\n removeTodo: id => dispatch(removeTodo(id))\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Todo);connect(). You can use built-in hooks mainly useState, UseReducer and useContext and because of these you often may not require Redux.