Understanding Redux

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