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

This article mainly introduces the relevant knowledge of "how to use redux in react". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use redux in react" can help you solve the problem.

Redux is a data state management plug-in, when using React or vue to develop component-based SPA programs, sharing information between components is a very big problem. For example, after the user logs in, the client will store user information (ID, avatar, etc.), and many components of the system will use this information, and when using this information, it will be very troublesome to get it again every time, so each system needs a function to manage the common information used by multiple components, which is the function of redux.

If you are a developer who has never come into contact with redux, I hope you can have a patient look at it. I am also optimistic that many blogs slowly sum up by themselves! It's a little better than the big guys looking for one by one.

Import React, {Component, Fragment} from 'react';//Class introduces import {connect} from' react-redux';//Hook, introduces import {useSelector, useDispatch} from 'react-redux'import {add, clear} from'.. / redux/actions/count' / / hook display component const CountItem = (props) = > {/ / deconstructed const {count, flag, add, clear} = props return (current sum: {count} current Flag: {flag? 'true':' false'} Click + 1 Zero)} / / hook container components const Count = () = > {const count = useSelector (state = > state.sum) const flag = useSelector (state = > state.flag) const dispatch = useDispatch () const countAdd = () = > {console.log (add.type) dispatch (add (1))} Const clearNum = () = > {dispatch (clear ())} return} export default Count// class display component / / class Count extends Component {/ / add = () = > {/ notify redux// this.props.add (1) / /}; / / clear = () = > {/ / this.props.clear (); / / render () {/ / return (/ the current sum is: {this.props.count} / / current Flag: {this.props.flag? 'true':' false'} / / Click + 1 false' / clear /); / /} / /} / / class container component / / export default connect (/ 1. Status / / state = > ({count: state.sum, flag: state.flagState}), / 2. Method / / {add, clear} / /) (Count)

The basic usage is pretty much like this. The key methods we use on hook are useSelector to use redux's state, dispatch to call reduce;, and connect to associate state with methods (reduce) in class components.

The difficulty lies in reduce and state.

What is the reduce here?

We use add and clear methods in the above code, and we create a new js file to implement these two methods.

/ / create an action object for the Count component / / introduce the constant import {ADD, CLEAR} from'. / constant';// to create the function export const add = data = > ({type: ADD, data,}); / / create the function export const clear = data = > ({type: CLEAR, data,})

There are constants on it-this is to facilitate the unified management of actionType, and the creation of corresponding action objects helps to modularize the code.

Paste it and build your own constant.js and put it in it.

Export const ADD = 'add';export const CLEAR =' clear'

At this point, our action object is almost defined, and we are going to manage the reducer. That is, dispatch distributes the above action object to update state.

We define a count.js in the reducer folder

/ / create a reducer// reducer for the Count component to receive two parameters: the preState of the previous state, and the action object actionimport {ADD, CLEAR} from'. / constant.js';// sets the initial state const initState = 0 default function addReducer export (preState = initState, action) {/ / get type and data const {type, data} = action from action / / decide how to process data switch (type) {case ADD: return preState + data; case CLEAR: return 0; / / initialize action default: return preState;} according to type

The above method needs to make the distribution call of type through dispatch (emphasize plus one)

The next step is to configure redux to the react project.

There is no flashback here, because it is unreasonable.

Here are a few key configurations

Configuration of store.js and use of global store

Let's first look at the global use of store.

Wrap App with Provider under your root route.

Import React from 'react';import ReactDOM from' react-dom';import App from'. / App.jsx';import store from'. / redux/store';import {Provider} from 'react-redux';ReactDOM.render (/ / Provider package App, purpose: to enable all descendant container components of App to receive store, document.getElementById (' root'))

There's a redux/store.js in here. Look at the code.

/ / there is only one store object in the whole document, and createStore receives two parameters, the first is the state tree, the second is that the action//applyMiddleware to be processed summarizes all the middleware into an array, and the asynchronous processing import {createStore, applyMiddleware} from 'redux';// middleware import thunk from' redux-thunk';// summarizes all reducerimport allReducers from'. / reducers/index' / / here is the debugging tool of goole, specifically using: Baidu import {composeWithDevTools} from 'redux-devtools-extension';// exposes storeexport default createStore (allReducers, composeWithDevTools (applyMiddleware (thunk); this is the end of the introduction on "how to use redux in react". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.