响应上下文文件夹中断/体系结构?

首先,我认为这个问题不一定有正确或错误的答案,但我只给你我的两分钱。

我目前正在重构一个Web应用程序,它每月服务数百万个会话,并且正在内部阶段服务器上测试Redux和Context版本。

重要注意事项:

• 我用的是单店的方法
• 它不是一个不断更新全球商店的应用程序

到文件夹结构。我喜欢把我的商店放在项目的根目录中。对于基于React的React应用程序,创建 /src 它基本上由以下文件组成:

• index.js//这里所有东西都是“捆绑”的
• initialstate.js//为存储提供初始状态,例如从服务器、缓存等。
• 方法/*.js/包含基于应用程序中使用的部分的拆分方法(如果可以拆分为单独的部分)

orgo my index.js简单如下:

import React from 'react';
import storeMethods from './methods';
import initialState from './initialState';

// to start of experimenting with context
// i would keep all read and write key value
// pairs right here and split as the codebase
// grows and you realize you need more space
export const store = {
  ...initialState,
  ...storeMethods
}

export const StoreContext = React.createContext(store)

存储方法 是一个捆绑出口从所有 methods 在 methods/ 文件夹。基本上,它只是包含键的另一个对象,这些键的值的功能如下:

export const methods = {
   showNavBar: function() {
      this.setState({ navBarOpen: true })
   }
}

初始状态 相当于呈现应用程序基本内容所需的键值对的表示,或者永远不会更改。基本上是一些全局设置。在绑定词法作用域之前,来自服务器的初始状态将被添加到应用程序的构造函数中的存储中。

store get被抛出到相关最外层react组件的状态中,并用作app状态,在这里,我将store的作用域绑定到react组件词汇作用域。

那么我有一个高阶分量 withContextConsumer 它用于包装任何需要访问状态的反应组件。hoc将订阅的密钥作为包装组件的属性分发给被包装的组件,并且可以作为只读或写使用。

无论您最终如何使用上下文,不要忘记,如果上下文存储正在更新,任何使用者都将自动调用它的呈现方法。在一个简单的 oldProps !== newProps 级别,您可以使用purecomponents。对于更复杂的差异,可以使用LifecycleMethod shouldComponentUpdate

编辑

基本应用程序结构

App.js:

import React, { PureComponent } from 'react'
import { StoreContext, store } from './store'
import { bindScopeToFunction } from './helpers'

class App extends PureComponent {
   constructor(props) {
      super(props)
      const { initialState = {} } = props
      const boundStore = bindScopeToFunction(store, this)
      this.state = {...boundStore, ...initialState}
   }
   render () {
      return(
         <StoreContext.Provider value={this.state}>
            // in here you render all your app
            // routing, childcomponents etc
            // in any component where you need access
            // to the global store
            // wrap it in <StoreContext.Consumer> it has
            // the whole store as render prop
         </StoreContext.Provider>
      )
   }
}

这里可以找到工作的基本示例 https://codesandbox.io/s/pm85w4y6xm