{"action":"created","issue":{"url":"https://api.github.com/repos/leopen-hu/leopen-hu.github.io/issues/15","repository_url":"https://api.github.com/repos/leopen-hu/leopen-hu.github.io","labels_url":"https://api.github.com/repos/leopen-hu/leopen-hu.github.io/issues/15/labels{/name}","comments_url":"https://api.github.com/repos/leopen-hu/leopen-hu.github.io/issues/15/comments","events_url":"https://api.github.com/repos/leopen-hu/leopen-hu.github.io/issues/15/events","html_url":"https://github.com/leopen-hu/leopen-hu.github.io/issues/15","id":359368028,"node_id":"MDU6SXNzdWUzNTkzNjgwMjg=","number":15,"title":"react复用复杂组件(使用了redux)相关资料整理","user":{"login":"leopen-hu","id":16874003,"node_id":"MDQ6VXNlcjE2ODc0MDAz","avatar_url":"https://avatars3.githubusercontent.com/u/16874003?v=4","gravatar_id":"","url":"https://api.github.com/users/leopen-hu","html_url":"https://github.com/leopen-hu","followers_url":"https://api.github.com/users/leopen-hu/followers","following_url":"https://api.github.com/users/leopen-hu/following{/other_user}","gists_url":"https://api.github.com/users/leopen-hu/gists{/gist_id}","starred_url":"https://api.github.com/users/leopen-hu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leopen-hu/subscriptions","organizations_url":"https://api.github.com/users/leopen-hu/orgs","repos_url":"https://api.github.com/users/leopen-hu/repos","events_url":"https://api.github.com/users/leopen-hu/events{/privacy}","received_events_url":"https://api.github.com/users/leopen-hu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-09-12T08:25:48Z","updated_at":"2018-11-23T02:12:56Z","closed_at":null,"author_association":"OWNER","body":"[《React、Redux与复杂业务组件的复用》](https://zhuanlan.zhihu.com/p/29211575)"},"comment":{"url":"https://api.github.com/repos/leopen-hu/leopen-hu.github.io/issues/comments/441143968","html_url":"https://github.com/leopen-hu/leopen-hu.github.io/issues/15#issuecomment-441143968","issue_url":"https://api.github.com/repos/leopen-hu/leopen-hu.github.io/issues/15","id":441143968,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MTE0Mzk2OA==","user":{"login":"leopen-hu","id":16874003,"node_id":"MDQ6VXNlcjE2ODc0MDAz","avatar_url":"https://avatars3.githubusercontent.com/u/16874003?v=4","gravatar_id":"","url":"https://api.github.com/users/leopen-hu","html_url":"https://github.com/leopen-hu","followers_url":"https://api.github.com/users/leopen-hu/followers","following_url":"https://api.github.com/users/leopen-hu/following{/other_user}","gists_url":"https://api.github.com/users/leopen-hu/gists{/gist_id}","starred_url":"https://api.github.com/users/leopen-hu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leopen-hu/subscriptions","organizations_url":"https://api.github.com/users/leopen-hu/orgs","repos_url":"https://api.github.com/users/leopen-hu/repos","events_url":"https://api.github.com/users/leopen-hu/events{/privacy}","received_events_url":"https://api.github.com/users/leopen-hu/received_events","type":"User","site_admin":false},"created_at":"2018-11-23T02:12:56Z","updated_at":"2018-11-23T02:12:56Z","author_association":"OWNER","body":"对于组件内屏蔽componentId带来的影响，有两种方案：\r\n1. 对mapStateToProps和mapDispatchToProps进行处理；\r\n```\r\n// mapDispatchToProps\r\nexport const mapDispatchToPropsFactory = (actionObjects) => ((dispatch, ownProps) => {\r\n  const { componentId } = ownProps;\r\n  const result = {};\r\n  Object.keys(actionObjects).forEach(actionKey => {\r\n    result[actionKey] = (data) => {\r\n      dispatch(actionObjects[actionKey]({\r\n        componentId,\r\n        ...data\r\n      }));\r\n    };\r\n  });\r\n  return result;\r\n});\r\n\r\n// mapStateToProps\r\nconst getState = (state, stateGetter) => {\r\n  const getterMap = {\r\n    string: () => getStateByPath(state, stateGetter),\r\n    function: () => stateGetter(state)\r\n  };\r\n\r\n  const _stateGetter = getterMap[typeof stateGetter]; // 此方法就不贴出来了\r\n  return stateGetter ? _stateGetter() : {};\r\n};\r\n\r\nexport const mapStateToPropsFactory = (componentType, needMapStates) => ((state, ownProps) => {\r\n  const { componentId } = ownProps;\r\n  // 当前组件的 state\r\n  const currentState = componentId ? state[componentType][componentId] : state[componentType];\r\n  // 其他组件的 state，这里需要注意，没有屏蔽其他组件的 componentId 的影响\r\n  const toMapStates = {};\r\n  forEach(needMapStates, (stateGetter, propName) => {\r\n    toMapStates[propName] = getState(state, stateGetter);\r\n  });\r\n\r\n  return {\r\n    ...toMapStates,\r\n    componentType: currentState\r\n  };\r\n});\r\n\r\n// enhance\r\nexport const enhance = (component, componentType, needMapStates, needMapActions) => {\r\n  const mapStateToProps = mapStateToPropsFactoryForCard(needMapStates);\r\n  const mapDispatchToProps = mapDispatchToPropsFactoryForCard(needMapActions);\r\n  return compose(connect(mapStateToProps, mapDispatchToProps)(component));\r\n};\r\n\r\n// component中使用\r\nexport class MyComponent {\r\n  // ...\r\n  const needMapStates = {\r\n    // mapStateToProps 已经默认绑定了当前组件的state，如果需要部分 selector，可以改造该函数\r\n   otherState1: state => state.OtherState.state1\r\n  };\r\n  const needMapActions = {\r\n    getSomething\r\n  };\r\n\r\n  export default enhance(MyComponent, 'MyComponent', needMapStates, needMapActions);\r\n}\r\n```\r\n2. 使用高阶组件处理，其实和1方法异曲同工，不过做改造时没有理解HOC，故没有使用这种方法。实际上就是在componentDidMount中处理enhance函数的功能并作为props传给子组件"}}
{"actor":{"display_login":"leopen-hu"}}