redux

  • Redux is one of the most popular state management containers in javascript in recent years, providing predictable global state management. Redux is often used for state management in large applications. The basic usage of Redux is as follows
  • With Redux, we write actions first. Actions are usually composed of Type and other related data. Here are two simple actions
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

// Number increment action
{ type: INCREMENT, payload: number }

// Number decrement action
{ type: DECREMENT, payload: number }

Copy the code
  • Next, we need to compile reducer according to actions. Reducer is a function with two initial values, one is the current state value state and the other is the current operation mode action
  • We need to perform corresponding logical processing according to the current operation mode and return a new state. Here, we set an initial value of 0 for state and add or subtract the values of INCREMENT and DECREMENT respectively
const initialState = 0

const numberReducer = (state = initialState, action) = > {
  switch(action.type) {
    case INCREMENT:
      return state + action.payload
    case DECREMENT:
      return state - action.payload
    default:
      return state
  }
}

Copy the code
  • The above only defined the operation form and how to respond to the operation, but did not actually trigger. The triggering state change requires the dispatch provided by Redux, which receives an action and passes this action to reducer to trigger the final state change, as follows

dispatch({ type: DECREMENT, payload: number })

Copy the code

React uses redux

  • Redux was the default option for almost every React project before the rex hooks came out, but the complex use of redux annoyed many developers, especially new developers
  • React-redux has received the help of hooks. React-redux has received the help of hooks. React-redux has received the help of hooks

React uses redux

  • Redux in React requires the use of the react-redux library. React-redux provides connect to use redux in components
import React from 'react'
import { connect } from 'react-redux'

class Test extends React.Component {
  constructor(){
    super()}mapStateToProps(state) {
    return {
      number: state.number
    }
  }

  mapDispatchToProps(dispatch) {
    return {
      increment: (number) = > dispatch({ type: 'INCREMENT'.payload: number }),
      decrement: (number) = > dispatch({ type: 'DECREMMENT'.payload: number }),
    }
  }

  render() {
    return (
      <div>
        <div>{ this.props.number }</div>
        <button onClick={()= >{this.props. Increment (10)}}> Add 10</button>
        <button onClick={()= >{this.props. Decrement (5)}}> Decreases 5</button>
      </div>)}}export default connect(mapStateToProps, mapDispatchToProps)(Test)


Copy the code

Redux is used in React hooks

  • To use redux in the react-redux command, use useSelector and useDispatch provided by react-Redux to set the state value and dispatch value
  • UseSelector returns the desired state value based on the accepted function, as shown in the number below
  • UseDispatch returns an action function that accepts an Action to perform a change in the state value
import * as React from 'react'
import { useSelector, useDispatch } from 'react-redux'

const Test = () = > {
  const number = useSelector(state= > state.number)
  const dispatch = useDispatch()
  return (
      <div>
        <div>{ number }</div>
        <button onClick={()= >{dispatch({type: 'INCREMENT', payload: 10})}}> Add 10</button>
        <button onClick={()= >{dispatch({type: 'DECREMMENT', payload: 5})}}> decrements by 5</button>
      </div>)}export default Test

Copy the code