This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

In the last article, we learned about UseEffects, which can trigger side effects during component rendering (and limit the conditions under which side effects can be triggered), as well as separate side effects concerns with multiple Useeffects to avoid lumping side effects into a component’s life cycle. React Hooks — useReducer

A,Reducerreview

In the previous article, we had contact with Reducer, which is an important part of Redux. In Redux, we mainly used Reducer as follows:

  1. createReducerFunction with an input parameter ofThe initial StatewithAction, through the insideAction.typeDefine different logic, eventually return newState
  2. usingReducerAs a parameterReact.createStore,StoreThe instance
  3. In the use ofStoreComponent into theStoreInstance objects
  4. Call when usedStore.dispatch( { type:"example" } )Send events
//Store.js
const Reducer = ({ content:"Initial State" },action) = >{
    switch(action.type){
        case "A" : return { content:"A" }
        case "B" : return { content:"B" }
        default : return { content:"C"}}}const Store = React.createStore(Reducer);
export default Store;
//A.js
import Store from "./Redux/Store.js"
class A extends React.Component {
    render() {
        return (
            <div onClick={() = >{ Store.dispatch( {type:"A"} ) } }>Click Me</div>)}}Copy the code

Second,useReducerlearning

useReducerThe use of:

Passing in parameters:

  • A parameter:Reducerfunction
  • Parameters of the two:Action

Return content:

  • Return an array
  • First entry: currentState
  • Array item 2: function for distribution, passed inAction, which is equivalent toReduxIn theStore.dispatch( {type:"example"} )

Usage Scenarios:

  • StateThe logic is complex and has multiple subvalues
  • The nextStateYou have to rely on the last oneStateTo deal with the acquisition

Use process:

  1. createReducerFunction, as written aboveReducerLogic (ReducerIn the functionStateThe parameter can be the previous one in the internal logicStateParticipate in logical processing)
  2. Create a newStateObject as the initialState
  3. willReducerFunction andStateObject is passed in as a parameteruseReducerAnd receive it through deconstructionuseReducerHook returnedStateAnd for distributing updatessetReducerfunction
  4. If distribution is required, call:setReducer( {type:"example"} )To carry outActionDistributed,StateIt will be updated
// Initialize State
const initialState = { content:"init" }
/ / define Reducer
const Reducer = (state,action) = > {
    switch(action.type){
        case "A" : return { content:"A" }
        case "B" : return { content:"B" }
        default : return { content:"C"}}}function showExampleA() {
    // use useReducer and receive State and setReducer
    let [state, setReducer] = useReducer(Reducer,initialState)
    //State is used with Action distribution
    return (
        <div>
            <h1>{state.content}</h1>
            <button onClick={() = >{ setReducer( {type:"A"} ) } }>Click Me</button>
        </div>)}Copy the code

In addition, there is also the logic mentioned above that we can use the previous State to perform the next State processing. Let’s take a look at it:

// Initialize State
const initialState = { count:0 }
/ / define Reducer
const Reducer = (state,action) = > {
    switch(action.type){
        case "one" : return { content:state.count+1 }
        case "two" : return { content:state.count+2 }
        default : return { content:state.count+3}}}function showExampleA() {
    // use useReducer and receive State and setReducer
    let [state, setReducer] = useReducer(Reducer,initialState)
    //State is used with Action distribution
    return (
        <div>
            <h1>{state.count}</h1>
            <button onClick={() = >{ setReducer( {type:"one"} ) } }>Click Me To Add 1</button>
            <button onClick={() = >{ setReducer( {type:"two"} ) } }>Click Me To Add 2</button>
            <button onClick={() = >{ setReducer( {type:""} ) } }>Click Me To Add 3</button>
        </div>)}Copy the code