{"action":"created","issue":{"url":"https://api.github.com/repos/peterlxb/Frontend-react/issues/84","repository_url":"https://api.github.com/repos/peterlxb/Frontend-react","labels_url":"https://api.github.com/repos/peterlxb/Frontend-react/issues/84/labels{/name}","comments_url":"https://api.github.com/repos/peterlxb/Frontend-react/issues/84/comments","events_url":"https://api.github.com/repos/peterlxb/Frontend-react/issues/84/events","html_url":"https://github.com/peterlxb/Frontend-react/issues/84","id":344650486,"node_id":"MDU6SXNzdWUzNDQ2NTA0ODY=","number":84,"title":"24-拆分复杂度(2):  如何组织 component, action 和 reducer","user":{"login":"peterlxb","id":8121883,"node_id":"MDQ6VXNlcjgxMjE4ODM=","avatar_url":"https://avatars2.githubusercontent.com/u/8121883?v=4","gravatar_id":"","url":"https://api.github.com/users/peterlxb","html_url":"https://github.com/peterlxb","followers_url":"https://api.github.com/users/peterlxb/followers","following_url":"https://api.github.com/users/peterlxb/following{/other_user}","gists_url":"https://api.github.com/users/peterlxb/gists{/gist_id}","starred_url":"https://api.github.com/users/peterlxb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/peterlxb/subscriptions","organizations_url":"https://api.github.com/users/peterlxb/orgs","repos_url":"https://api.github.com/users/peterlxb/repos","events_url":"https://api.github.com/users/peterlxb/events{/privacy}","received_events_url":"https://api.github.com/users/peterlxb/received_events","type":"User","site_admin":false},"labels":[{"id":976991449,"node_id":"MDU6TGFiZWw5NzY5OTE0NDk=","url":"https://api.github.com/repos/peterlxb/Frontend-react/labels/React-tutorial","name":"React-tutorial","color":"f76792","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-26T00:16:26Z","updated_at":"2018-07-26T02:19:09Z","closed_at":null,"author_association":"OWNER","body":"## 文件夹结构\r\n\r\n> **按 feature 组织源文件**\r\n> **组件和样式文件同一级**\r\n> **Redux 单独文件夹**\r\n> **单元测试保持同样目录结构放在 tests 文件夹**\r\n\r\n如下图所示\r\n![2018-07-26 10 00 39](https://user-images.githubusercontent.com/8121883/43237069-c6be26ec-90ba-11e8-9f78-0667f36d750f.png)\r\n\r\n#### 在redux目录下放置action和reducer。每个action和对应的reducer放在一个单独的文件里面。可以从文件名就知道redux有哪些action。\r\n\r\n#### 单元测试一般是需要单独去维护的，所以放在单独的文件夹下面。\r\n\r\n#### 示例中用features目录取代之前的components目录，在这个目录下面按照应用不同的功能分为不同的小feature。\r\n\r\nfeatures文件夹下面 在common文件夹下面定义一些通用的组件，这些组件是独立于所有的feature之外的。比如pageNotFound组件。\r\n\r\nexamples文件夹定义当前功能的代码。它有自己的布局Layout，然后有sample页面，有计数器有redditList页面。\r\n\r\n####  通过上面这种方式去组织代码，我们就要考虑如何去把拆分出来的action，reducer还有路由配置，还有组件包括它们的央视进行一个统一的加载。"},"comment":{"url":"https://api.github.com/repos/peterlxb/Frontend-react/issues/comments/407954632","html_url":"https://github.com/peterlxb/Frontend-react/issues/84#issuecomment-407954632","issue_url":"https://api.github.com/repos/peterlxb/Frontend-react/issues/84","id":407954632,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNzk1NDYzMg==","user":{"login":"peterlxb","id":8121883,"node_id":"MDQ6VXNlcjgxMjE4ODM=","avatar_url":"https://avatars2.githubusercontent.com/u/8121883?v=4","gravatar_id":"","url":"https://api.github.com/users/peterlxb","html_url":"https://github.com/peterlxb","followers_url":"https://api.github.com/users/peterlxb/followers","following_url":"https://api.github.com/users/peterlxb/following{/other_user}","gists_url":"https://api.github.com/users/peterlxb/gists{/gist_id}","starred_url":"https://api.github.com/users/peterlxb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/peterlxb/subscriptions","organizations_url":"https://api.github.com/users/peterlxb/orgs","repos_url":"https://api.github.com/users/peterlxb/repos","events_url":"https://api.github.com/users/peterlxb/events{/privacy}","received_events_url":"https://api.github.com/users/peterlxb/received_events","type":"User","site_admin":false},"created_at":"2018-07-26T02:19:09Z","updated_at":"2018-07-26T02:19:09Z","author_association":"OWNER","body":"## 组件和样式\r\n![2018-07-26 10 11 14](https://user-images.githubusercontent.com/8121883/43237405-411c9148-90bc-11e8-8634-84df6dd6b7c9.png)\r\n\r\nReact组件本身除了组件自己，一般还需要一个样式文件。\r\n\r\n可以通过一个index.js入口文件将所有组件加载到一起。这样引用组件的时候就会很方便，可以直接把一个feature作为一个package通过命令import的方式去引入需要的组件。\r\n\r\n对于样式文件也有一个style.less的入口文件，用它来加载所有放入less文件。\r\n如果是在组件内自己import自己的样式，这时候会有一个潜在的问题，组件被多次使用的时候，less文件可能会打包多次。可以将样式文件进行一个单独的打包流程，由style.less去加载所有的样式文件。\r\n\r\n对于每一个feature都有一个index.js文件，这个文件会import feature相关的组件。然后把它export出去。这样的话，其它地方要引入这个feature下面组件的时候可以通过命名import的方式去引入。\r\n\r\n"}}
{"actor":{"display_login":"peterlxb"}}