前端的状态管理（下）

import { createStore } from 'redux'
const store = createStore(reducer);

import { createStore } from 'redux'
const store = createStore(reducer)
store.getState()

const action = {
    type: 'click',
    info: '提交借书单'
}

store.dispatch(action)

const reducer = (state, action) => {
    return `action.info: ${state}` // => 提交借书单：红楼梦
}

store.subscribe(接收书本)
当 State 一旦发生变化，那么 store.subscribe() 就会监听到自动执行更新 View。

const unsubscribe = store.subscribe(() => {
  render() {
    // 更新view 
  }
})
// 也可以取消订阅（监听）
unsubscribe()

// KeepAlive.js
export default function keepAliveWrapper() {
  return function keepAlive(WrappedComponent) {
    return class KeepAlive extends WrappedComponent { // ps
      constructor(props) {
        super(props)
        // do something ...
      }

      componentDidMount() {
        const {
          keepAlive: { fieldsValue },
        } = this.context
        // do something ...
        super.componentDidMount()

      }

      render() {
        // do something ...
        return super.render()
      }
    }
  }
}

// main.jsx 根组件
import React from 'react'

const appContext = React.createContext()

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          keepAlive: {}, // 缓存对象
          isCache: false, // 是否缓存
          fieldsValue: {} // 缓存表单值
        }
    }
    componentDidMount() {
        // 初始化
        const keepAlive = {
          isCache: this.state.isCache,
          toggle: this.toggleCache.bind(this),
          fieldsValue: this.state.fieldsValue,
        }
        this.setState({ keepAlive })
    }
    // 这里封装一个清除状态的方法 防止渲染警告（you can't set fields before render ...）
    // 比如 list1 => list1/detail => list2 需要将跳转放在以下回调中并清除状态
    toggleCache(isCache = false, payload, callback) {
        const { fieldsValue = null } = payload
        const keepAlive = {
          isCache,
          fieldsValue,
          toggle: this.toggleCache.bind(this),
        }
        const fn = typeof callback === 'function' ? callback() : void 0
        this.setState(
          {
            keepAlive,
          },
          () => {
            fn
          }
        )
    }
    render() {
        const { keepAlive } = this.state
        <appContext.Provider value={{ keepAlive }}>
            // your routes...
        </appContext.Provider>
    }

}

// 在页面使用时
import React from 'react'
import keepAlive from '../keepAlive'

// keepAlive的位置需要放在原组件最近的地方 
@keepAlive()
class App extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            // init something...
        }
    }
    componentDidMount() {
        // do something...
        if(this.context.keepAlive.fieldsValue) {
            const { tableList } = this.context.keepAlive.fieldsValue
            console.log('缓存啦：',tableList) // 缓存啦：['1', '2']
        }
    }
    // 查看详情
    detail = () => {
        this.context.keepAlive.fieldsValue = {
            tableList: ['1', '2']
        }
        // jump...
    }
    // 当需要跨一级路由进行跳转时,如 list1 => list1/detail（下面这个方法应该在详情页里） => list2,此时需要处理一下警告
    toList2 = () => {
        this.context.keepAlive.toggle(false, {}, () => {
            // jump...
        })
    }
}

{
    "compilerOptions"： {
        "experimentalDecorators": true
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

{
    "plugins": [
        "@babel/plugin-proposal-decorators",
        {
            "legacy": true
        }
    ]
}