React Redux W3schools

Posted on  by admin
Redux Installation:. To install Redux, React 16.8.3 or higher version is required and is a must. Command: To use Redux with React application. $npm install redux react-redux –save. Redux Architecture:. There are three main components of Redux architecture. The entire state of an application lists at a place called Store. It acts as a brain and manages the status of the application. It also has a dispatch(action) function. An action is a pure object which is sent or dispatched from the view. It is created to store information about the user’s event such as info about the type of action, the time of occurrence, the location of occurrence, info about its coordinates, and info about the state it aims to change. Reducer is a pure function which is used to return a new state from the initial state. It reads the payloads from the actions. The reducer then updates the store via the state accordingly. ReactJS Tutorial. ReactJS Useful Resources. Selected Reading. React redux is an advanced state management library for React. As we learned earlier, React only supports component level state management. In a big and complex application, large number of components are used. React recommends to move the state to the top level component and pass the state to the nested component using properties. It helps to some extent but it becomes complex when the components increases. React redux chips in and helps to maintain state at the application level. React redux allows any component to access the state at any time. Also, it allows any component to change the state of the application at any time. Let us learn about the how to write a React application using React redux in this chapter. React redux maintains the state of the application in a single place called Redux store. React component can get the latest state from the store as well as change the state at any time. Redux provides a simple process to get and set the current state of the application and involves below concepts. Store − The central place to store the state of the application. Actions − Action is an plain object with the type of the action to be done and the input (called payload) necessary to do the action. For example, action for adding an item in the store contains ADD_ITEM as type and an object with item’s details as payload. The action can be represented as −. Reducers − Reducers are pure functions used to create a new state based on the existing state and the current action. It returns the newly created state. For example, in add item scenario, it creates a new item list and merges the item from the state and new item and returns the newly created list. Action creators − Action creator creates an action with proper action type and data necessary for the action and returns the action. For example, addItem action creator returns below object −. Component − Component can connect to the store to get the current state and dispatch action to the store so that the store executes the action and updates it’s current state. The workflow of a typical redux store can be represented as shown below. React component subscribes to the store and get the latest state during initialization of the application. To change the state, React component creates necessary action and dispatches the action. Reducer creates a new state based on the action and returns it. Store updates itself with the new state. Once the state changes, store sends the updated state to all its subscribed component. Redux provides a single api, connect which will connect a components to the store and allows the component to get and set the state of the store. The signature of the connect API is −. All parameters are optional and it returns a HOC (higher order component). A higher order component is a function which wraps a component and returns a new component. Let us see the first two parameters which will be enough for most cases. mapStateToProps − Accepts a function with below signature. Here, state refers current state of the store and Object refers the new props of the component. It gets called whenever the state of the store is updated. mapDispatchToProps − Accepts a function with below signature. Here, dispatch refers the dispatch object used to dispatch action in the redux store and Object refers one or more dispatch functions as props of the component. React Redux provides a Provider component and its sole purpose to make the Redux store available to its all nested components connected to store using connect API. The sample code is given below −. Now, all the component inside the App component can get access to the Redux store by using connect API. Let us recreate our expense manager application and uses the React redux concept to maintain the state of the application. First, create a new react application, react-message-app using Create React App or Rollup bundler by following instruction in Creating a React application chapter. Next, install Redux and React redux library. Next, install uuid library to generate unique identifier for new expenses. Next, open the application in your favorite editor. Next, create src folder under the root directory of the application. Next, create actions folder under src folder. Next, create a file, types.js under src/actions folder and start editing. Next, add two action type, one for add expense and one for remove expense. Next, create a file, index.js under src/actions folder to add action and start editing. Next, import uuid to create unique identifier. Next, import action types. Next, add a new function to return action type for adding an expense and export it. Here, the function expects expense object and return action type of ADD_EXPENSE along with a payload of expense information. Next, add a new function to return action type for deleting an expense and export it. Here, the function expects id of the expense item to be deleted and return action type of ‘DELETE_EXPENSE’ along with a payload of expense id. The complete source code of the action is given below −. Next, create a new folder, reducers under src folder. Next, create a file, index.js under src/reducers to write reducer function and start editing.