美文网首页
React + React-router + Redux 的前端

React + React-router + Redux 的前端

作者: Eternal丶星空 | 来源:发表于2018-07-16 21:30 被阅读37次

React + React-router + Redux 的前端代码框架

此前的教程中,分别在介绍 React-router 和 Redux 的时候,都介绍了各自的代码文件结构特点。现在将两者结合起来,就是我们即将进行实际项目开发的代码框架了。

这两的代码结合其实没有太多冲突,只有./app/index.jsx一个文件中有看似重叠的部分,其实原理还是 React 组件。

render(
    <Provider store={store}>
        <RouteMap history={hashHistory}/>
    </Provider>,
    document.getElementById('root')
)

在此,我们再将./app目录下的各个文件夹的用处重新总结一遍,权当复习此前学过的知识。

./app/actions

Redux 中使用的 actions,前面刚刚讲过。

./app/components

组件(木偶组件)目录。注意,此前强调过,一个组件一般用一个文件夹表示,里面一般有index.jsxstyle.lessimg/目录

./app/constants

Redux 的 actions 和 reducers 都会用到的常量,统一放在这里,前面刚刚讲过。

./app/containers

页面(智能组件)目录。注意,一个页面一般用一个文件夹表示,里面有index.jsx,如果页面复杂,可能需要subpage/目录来拆分页面。

./app/reducers

Redux 用到的 reducers,前面刚讲过。

./app/router

React-router 配置文件

./app/static

系统全局使用的静态资源

./app/store

Redux 创建 store

./app/util

系统工具函数,处理时间格式,处理字符串格式等

相关文章

网友评论

      本文标题:React + React-router + Redux 的前端

      本文链接:https://www.haomeiwen.com/subject/ualipftx.html