Integrate Redux in the React project

// How to integrate REdux in a project (in real development, integration of network request data is required)

Yarn add redux; // yarn add redux; // yarn add redux; // yarn add redux-thunk (middleware through which network requests are made)

// 2. Create the store file under the SRC folder of the project (this is the redux folder) –> create the reducer.js and index.js files

// Reducer. Js file: // Export functions that merge multiple reducers in a reducer project (redux-immutable). Yarn add redux-immutable import {combineReducers} from ‘redux-immutable’ // Import a reducer from the project. (Because the reducer in each route is named after the reducer, it is necessary to rename the reducer when importing to avoid multiple reducer names), the reducer here will be multiple, Import {reducer as recommendReducer} from ‘.. /pages/diccover/c-pages/recommend/store’; / / here is the synthesis of reducer, need the incoming object is a const cReducer = combineReducers ({how: recommendReducer,}) / / export synthetic reducer, Use export Default cReducer in the index.js file

// index.js file: // Import the function to create a store in redux, And export needs to use the function of middleware import {createStore applyMiddleware, compose} from the ‘story’ / / import middleware in the story – thunk import thunk the from ‘redux-thunk’ // Reduce import reducer from ‘./reducer’ // A piece of code that needs to be introduced using that browser’s debugging tool const ComposeEnhancers = window. REDUX_DEVTOOLS_EXTENSION_COMPOSE | | compose / / by createStore create store object / / two parameters: There is a reducer, so we need to split the reducer. Therefore, a reducer. Js file needs to be created to merge multiple reducers in the project // 2. Some of the ways to enhance the Store, here we pass in a middleware, Const store = createStore(Reducer,composeEnhancers(applyMiddleware(thunk))) // Export the created store Export Default Store for global use

In the app.js file (here are just some introductions for redux) // put provider import {provider} from ‘react-redux’ in the react-redux // import the created store import store from ‘./store’

Export default Memo (function App() {return (// Use Provider to share data stored in store. // The Provider component is placed at the top of the project, in the first layer is the routing related components, after the components defined by their own. })

// Create a store folder below each route file (create index.js\reducer.js\constants.js\ actionresearch.js) // Reducer.js: Define a reducer import {Map} from ‘immutable’ reducer import {Map} from ‘immutable’ reducer import {Map} from ‘immutable’ reducer import {Map} from ‘immutable’ // import { CHANGE_TOP_BANNERS } from ‘./constants’; // Import mode 2: (This mode of import is directly all import, when using: ActionTypes. Change_top_integration) import * as actionTypes from ‘./constants’ // Define default states (e.g. So we can define an empty array) const defaultState = Map({topintegration :[],}) // Define a separate reducer function (with two arguments: The first parameter is state, which is usually guaranteed to be state=defaultState; The second argument is action, Reducer (state = defaultState, action){ switch(action.type){ case actionTypes.CHANGE_TOP_BANNERS: // return {… state, topBanners: Action. Topintegration} return state.set(” topintegration “, action.topintegration) // We must end the reducer with default, otherwise we will get an error: Return state}} // Export reducer export default reducer

// 5. Define your reducer constant files that need to be used (in case we make errors) export const change_top_integration = “recommend/ change_top_integration”

// Create the index.js file // Import the created reducer file import reducer from ‘./reducer’ export {reducer}

// 7. Create the actionactionine.js file (this file contains the middleware that sends the network request and a function called dispatch, Import * as actionTypes from ‘./constants’ // Import {gettopintegration} from the function exported in sending network requests Const changeTopBannerAction = (res) => ({ type:actionTypes.CHANGE_TOP_BANNERS, Topintegration: res.integration}) // Export const getTopBannerAction = () => {return integration => {// In this network is to send the requested action getTopBanners (). Then (res = > {/ / here is: dispatch network (functions) to send request dispatch (changeTopBannerAction (res)})}}

// Create a separate file for each module to send network requests in the services folder (such as the recommend. Js file) // First import the package for axios in your project import request from ‘./request’ // Export function gettopclearly (){return request({url:”/banner”})} Export function gettopclearly (){return request({url:”/banner”})}

Component and REdux associations do two main things: 1. Get data, 2. { memo,useEffect } from ‘react’ import { useSelector,useDispatch,shallowEqual } from ‘react-redux’

import { getTopBannerAction } from ‘.. /.. /store/actionCreators’ function JHRecommend(props) {

/ / to get how the data in the const {topBanners} = useSelector (state = > ({topBanners: state. How. TopBanners}), shallowEqual)

Const dispatch = useDispatch()

UseEffect (() => {dispatch(getTopBannerAction())},[dispatch])

return (

export default memo(JHRecommend)