Understanding Redux

Time:2020-7-30

1.context

Key words: state sharing — state promotion– this.context.xxx

Parent component

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}

Sub components

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color:  this.context.themeColor  > > React.js  Book title</h1>
    )
  }
}

2. dispatch

Key words: responsible for data modification, dispatch = = statechanger

Data state

let appState = {
  title: {
    text: ' React.js  Small books',
    color: 'red',
  },
  content: {
    text: ' React.js  Small book content ',
    color: 'blue'
  }
}
function dispatch (action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      appState.title.text = action.text
      break
    case 'UPDATE_TITLE_COLOR':
      appState.title.color = action.color
      break
    default:
      break
  }
}

According to the action object, the type and response processing are preset

3.store

Key words: store = state + dispatch (+ subscribe)

subscribe==addListener

dispatch == stateChanger+listenerAction

function createStore (state, stateChanger) {
  const getState = () => state
  const dispatch = (action) => stateChanger(state, action)
  return { getState, dispatch }
}
function createStore (state, stateChanger) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    stateChanger(state, action)
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}        

4. Performance issues: unnecessary rendering

Keywords: whether the new state is consistent with the old state: avoid pointer being the same (extension operator and shallow copy)

Modify statechanger to return the new status

function stateChanger (state, action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      Return {// builds a new object and returns
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'UPDATE_TITLE_COLOR':
      Return {// builds a new object and returns
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      Return state // the original object is returned without modification
  }
}

5. Merge statechanger and state

Key words: statechanger setting initial default state

function stateChanger (state, action) {
  if (!state) {
    return {
      title: {
        text: ' React.js  Small books',
        color: 'red',
      },
      content: {
        text: ' React.js  Small book content ',
        color: 'blue'
      }
    }
  }
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'UPDATE_TITLE_COLOR':
      return {
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state
  }
}
function createStore (stateChanger) {
  let state = null
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = stateChanger(state, action)
    listeners.forEach((listener) => listener())
  }
  Dispatch ({}) // initialize state
  return { getState, dispatch, subscribe }
}

6.reducer

Key words: change the name of statechanger to reducer

function createStore (reducer) {
  let state = null
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = reducer(state, action)
    listeners.forEach((listener) => listener())
  }
  Dispatch ({}) // initialize state
  return { getState, dispatch, subscribe }
}

This article is about《 React.js Some notes of Xiaoshu, combing some concepts in redux
The code in this paper comes from the bearded dahar《 React.js Xiaoshu

Recommended Today

Regular expression sharing for checking primes

This regular expression is shown as follows: Regular expressions for checking prime numbers or not To use this positive regular expression, you need to convert the natural number into multiple 1 strings. For example, 2 should be written as “11”, 3 should be written as “111”, 17 should be written as “11111111111”. This kind of […]