Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to realize react-redux state management in react18". In daily operation, I believe that many people have doubts about how to realize react-redux state management in react18. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to realize react-redux state management in react18". Next, please follow the editor to study!

There are still a lot of state management in react. There are five popular ones:

Recoil

MobX

XState

Redux

Context

Today we're going to talk about redux, one of the many state management in react. Although I don't like this very much, I think anyone can do simple state management, but the difficult part is the watershed for programmers, so let's talk about redux today.

Let's talk about the advantages of redux:

It can pass values in many components, breaking the restriction of react unidirectional data flow.

Supports not only react but also mainstream frameworks such as vue

Of course it's easy to use.

Next, let's talk about when to use him.

We use redux when we have a lot of components, but it is very difficult to pass values between components.

Redux must be used as the last card, because its layout is a bit complicated.

Next we install and use redux

Yarn add redux react-redux redux-devtools-extension redux-thunk

After the installation, let me tell you what each plug-in is for.

Redux needless to say state management

React-redux, this plug-in, let's put it this way: that is, redux divides components into ui components and container components, naturally we usually write methods, pages and so on are called ui components, and those provided by redux are called container components. These two components constitute parent-child components. Remember what I said, which will be used below.

Redux-devtools-extension is a very long ui plug-in officially provided by redux that can check the status, so that we can know the data of each component in the case of many components, which is very sweet.

The plug-in redux-thunk allows redux to have the ability to use asynchronous operations. Redux itself does not support asynchronous operations.

Let's start deploying redux in react. It will be a little complicated in the middle, and we are encouraged to type the code twice more. After all, it is still the inner sentence, the simple one can be everyone, and the difficult one is the watershed between you and other programmers.

Step 1: we create a redux directory under the src directory as a folder for our state management.

Step 2: create the store.js file under the redux folder as our entry file

/ * * this file is specifically used to expose a store object The whole application has only one store object * / / create store as the core of redux to support asynchronous middleware import {legacy_createStore as createStore ApplyMiddleware} from 'redux' / / introduce support for asynchronous actonimport thunk from' redux-thunk'// introduce developer tool import {composeWithDevTools} from 'redux-devtools-extension'import Reducer from'. / reducer' here is the reduces file here is not said to look down to export default createStore (Reducer,composeWithDevTools (applyMiddleware (thunk)

Step 3: create an actions file under the redux folder to manage our action objects, including two type,data

Type: this is the identity attribute

Data: as the name implies, it is data.

/ * * generate action objects specifically for count components * / export const increment=data= > ({type: "add", data}) export const decrement=data= > ({type: "inadd", data}) / / Asynchronous action means that the value of action is the function export const incrementAsync= (data,time) = > {return (dispatch) = > {setTimeout (() = > {dispatch (increment (data))}, time)}}

Step 4: create our more important reducer.js file under the redux folder. This file is a pure function, in which no operations are allowed. Add is to add, minus is to subtract, and cannot have any conditions or asynchronism.

/ * reduce is only a pure function, no matter what even number plus odd number, etc., is just a pure function * itself is a function * / the previous value The passed value / / prestate initialization state is null, so you have to define the default value const initState=0export default function countReduce (preState=initState,action) {const {type,data} = action switch (type) {case "add": return preState+data case "inadd": return preState-data default: return preState }}

Step 5: here we are for the sibling component. It is mentioned above that the sibling component passes values. Yes, redux uses props to pass values.

Set it in the index.js file

Import store from ". / redux/store"; import {Provider} from "react-redux"; const root = ReactDOM.createRoot (document.getElementById ('root')); root.render ()

Let's go to use redux, use it in components, we can combine ui components with container components, according to the meaning is to use a word called connect to use the introduction in components (because the version of react-18 is used to promote hooks and functional components, the following example is functional components)

Import {connect} from 'react-redux'// introduces the operation method import {add Inadd} from'.. / action'const app= (props) = > {/ / if there is a data, the function component is successfully deployed. The console.log (props.count) method is porps.add () return ()} export default connect (/ / data state= > ({count:state}), / / method {add). Inadd}) (app) so far The study on "how to implement react-redux state management in react18" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.