React uses a react-Redux library to manage react-Redux problems. Take a look at his diagram:

connect

The React-Redux library effectively combines the React component with redux. The idea is to use a container to interact with Redux. The real React UI component interacts with the props passed by the Count component. One is all the saved states in REdux, and one is the various methods used to manipulate the configurations. So make the final change to the code above:

Store file changes
+ const combine = combineReducers({
+    showTagsReducer
+   })

- export default createStore(showTagsReducer)
+ export default createStore(combine)
Copy the code
The ShowTags component is modified
+ import {connect} from "react-redux"; - componentDidMount() { - store.subscribe(()=>{ - this.setState(()=>{ - return {... this.state,isShow:! this.state.isShow} - }) - }) - } - changeState = ()=>{ - const {isShow} = this.state - store.dispatch(showTagsAction(isShow)) - } + changeState = ()=>{ + const {isShow} = this.state + this.props.showTagsAction(isShow) + this.setState({isShow: ! isShow}); + } + return ( ... - {store.getState() ? tagsArr.map(item=><li key={item.id}>{item.name}</li>) : "Empty"} + {this. Props? TagsArr. The map (item = > < li key = {item. Id} > {item. The name} < / li >) : "Empty"}) + export default connect (state = > ({isShow: state. ShowTagsReducer}), {+ showTagsAction +}) (index)Copy the code
index.js
<Provider store={store}> < APP /> </Provider>Copy the code

Explanation of the newly added variable:

Connect is a correlating function that passes the state of redux and the method to change its configuration to the component in the first parenthesis, and the name of the component to change in the second parenthesis. Therefore, the complete API for CONNECT should look like this

Const VisibleTodoList = connect(mapStateToProps, Pass in the form of a callback function to mapDispatchToPropsCopy the code

The tag is used to uniformly pass store as an argument so that it can be quickly passed to the required object as a state object and rendered when state changes.

Use of redux in hooks

With the new hooks release, redux is largely unnecessary because we can use custom hooks to manipulate data. Redux = redux; redux = redux; redux = redux; redux = redux; My understanding is that he used the Store to store a state, exposed an interface to the ReactComponent, accepted only one action object to change the state, and then decided the corresponding operations using reducer according to the methods of the action object. This is the essence of Redux. Which apis do hooks have to implement redux?

  1. We need a variable that, like a Provider, passes store object data to an object by opening a wormhole directly
  2. We need a method that brings in the Store object and provides a read interface and a write interface just like the Connect method

The first requirement is solved with useContext and the second with the useReducer method. From this, the following code is given

UseContext,useReducer import React, {createContext, useContext,useReducer} from "React "; Const redux = createContext({}); const redux = createContext({}); Const initState = {name:"xiaoznz", n:10} const initState = {name:"xiaoznz", n:10} Const reducer = (state,action)=>{const {type,data} = action switch (type){case "addNum": return {... state,n:state.n+data}; case "deleteNum": return {... state,n:state.n+data}; default: return state; } // redux function App(){// redux function App(); Dispath const [state,dispatch] = useReducer(reducer,initState) return (<> Provider value={{state,dispatch}}> <ShowNum/> </ redux.provider > </>)} function Const {state,dispatch} = useContext(Redux) return (<div> Redux data is {state.n}, user name is: {state.name} <hr/> / <button onClick={()=>{dispatch({type:"addNum",data:1})}}>+1</button> <button onClick={()=>{dispatch({type:"deleteNum",data:1})}}>-1</button> </div> ) } export default App;Copy the code

With that, the basics of Redux are basically done.