#简介

Redux is a predictable state container for JavaScript apps.

• 使用中间件示例

  JavaScript复制

  import { createStore, applyMiddleware } from 'redux'
  import todos from './reducers'
  
  function logger({ getState }) {
    return next => action => {
      console.log('will dispatch', action)
  
      // Call the next dispatch method in the middleware chain.
      const returnValue = next(action)
  
      console.log('state after dispatch', getState())
  
      // This will likely be the action itself, unless
      // a middleware further in chain changed it.
      return returnValue
    }
  }
  
  const store = createStore(todos, ['Use Redux'], applyMiddleware(logger))
  
  store.dispatch({
    type: 'ADD_TODO',
    text: 'Understand the middleware'
  })
  // (These lines will be logged by the middleware:)
  // will dispatch: { type: 'ADD_TODO', text: 'Understand the middleware' }
  // state after dispatch: [ 'Use Redux', 'Understand the middleware' ]
  

  #Reference

  🏁 Final Form - Announcement

  Two and a half years ago, about a month after Dan Abramov's unforgettable launch of Redux at React Europe 2015, I released a humble little library that managed form state in Redux, called Redux-Form, which, over the intervening period, has grown quite substantially in popularity.
  https://erikras.com/blog/final-form-announcement

  Question: How to choose between Redux's store and React's state? · Issue #1287 · reduxjs/redux

  This was referenced Nov 29, 2017 You can't perform that action at this time.
  https://github.com/reduxjs/redux/issues/1287

• 编写一个中间件

  JavaScript复制

  // next 是用中间件增强之后的 dispatch
  // dispatch 是最原始的 store.dispatch
  const thunkMiddleware = ({ dispatch }) => next => action => {
    if (typeof action === 'function') {
  
      // 函数形式的 action 就把 dispatch 给这个 action，让 action 决定什么时候 dispatch （控制反转）
      return action(dispatch);
    }
  
    // 普通的 action 就直接传递给下一个中间件处理
    return next(action);
  }
  

• createStore 原理

  JavaScript复制

  function dispatch(action: A) {
      if (!isPlainObject(action)) {
        throw new Error(
          `Actions must be plain objects. Instead, the actual type was: '${kindOf(
            action
          )}'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store\#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic\#using-the-redux-thunk-middleware for examples.`
        )
      }
  
      if (typeof action.type === 'undefined') {
        throw new Error(
          'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.'
        )
      }
  
      if (isDispatching) {
        throw new Error('Reducers may not dispatch actions.')
      }
  
      try {
        isDispatching = true
        currentState = currentReducer(currentState, action)
      } finally {
        isDispatching = false
      }
  
      const listeners = (currentListeners = nextListeners)
      for (let i = 0; i < listeners.length; i++) {
        const listener = listeners[i]
        listener()
      }
  
      return action
    }
  

• applyMiddleware 原理> [!important]

  applyMiddleware 会把原始 dispatch 和 getState 传入 middlewares, 并且会生成最终的 dispatch

  JavaScript复制

  export default function applyMiddleware(...middlewares) {
    return createStore => (...args) => {
      const store = createStore(...args)
      let dispatch = () => {
        throw new Error(
          `Dispatching while constructing your middleware is not allowed. ` +
            `Other middleware would not be applied to this dispatch.`
        )
      }
  
      const middlewareAPI = {
        getState: store.getState,
        dispatch: (...args) => dispatch(...args)
      }
  		// 把原始 dispatch 和 getState 传入 middlewares
      const chain = middlewares.map(middleware => middleware(middlewareAPI))
  		// 用中间件增强之后的 dispatch, 即 next
      dispatch = compose(...chain)(store.dispatch)
  
      return {
        ...store,
        dispatch
      }
    }
  }
  

Reference