专栏首页菜鸟计划redux工程化结构

redux工程化结构

一、简述

redux的工程化管理

  • 1.reducer的模块化划分:每一个板块有一个自己对应的reducer,最后基于一些方法把所以的reducer合并即可;
  • 2.基于actionCreator统一管理每次派发需要的行为对象,而且和reducer一样,也是分板块管理的;
  • 3.把dispatch和reducer校验时候需要的行为标识(type)进行统一管理

目录建设

store store中存放的是redux中使用的东西

  • action: action文件夹存放的是actionCreator内容
  • reducer reducer文件夹存放的是每个板块自己对应的reducer
  • actionTypes.js 存储项目中需要的所以行为标识
  • index.js 创建store容器的

二、实战代码

直接看代码

App.js //(只用引入一行创建容器store的js就可以了)
import './store/index.js'

store/index.js  //(创建容器,传入合并好的reducer)
import {createStore} from 'redux'
import reducer from './reducer/index.js'
let store = createStore(reducer);
window.store = store;

store/actionTypes.js //(定义所有的类型变量名)
const VOTE_SUPPORT  = 'VOTE_SUPPORT';
const VOTE_AGAINST  = 'VOTE_AGAINST';
export {
    VOTE_SUPPORT,
    VOTE_AGAINST
}

store/action/vote.js //(按不同模块定义的不同的行为对象,返回相应的标识type类型)
import * as TYPES from '../actionTypes.js'
let vote = {
    support(){
        return {
            type: TYPES.VOTE_SUPPORT
        }
    },
    against(){
        return {
            type: TYPES.VOTE_AGAINST
        }
    }
};
export default vote;

store/action/index.js //(导出不同模块的action对象)
import vote from './vote'
import person from './person'
export default {    
    vote,
    person
}

store/reducer/vote.js //(定义不同模块的自己的reducer)
import * as TYPES from '../actionTypes.js'
export default function vote(state = {
    n: 0,
    m: 0
}, action) {
    switch (action.type) {
        case TYPES.VOTE_SUPPORT: state.n = state.n + 1; break;
        case TYPES.VOTE_AGAINST: state.m = state.m + 1; break;
    }
    return state;
}

store/reducer/index.js //(利用combineReducers函数合并不同的reducer)
import vote from './vote'
import person from './person'
import {combineReducers} from 'redux'
let reducer = combineReducers({
    vote,
    person
});
export default reducer;

<Vote title={'标题一'}></Vote>  //调用

vote.js
import React from 'react';
import VoteBody from './voteBody.js'
import VoteFooter from './voteFooter.js'
class Vote extends React.Component{
    constructor(){
        super();
    }
    render() {
        return (
            <div>
                <VoteBody></VoteBody>
                <VoteFooter></VoteFooter>
            </div>
        )
    }
}
export default Vote;

voteFooter.js
import React from 'react';
import action from '../store/action/index.js'
class VoteFooter extends React.Component{
    constructor(){
        super()
    }
    render() {
        //获取不同模块自己的行为函数,执行后获取对应的标识
        let {support, against} = action.vote;   
        return (
            <div>
                <button onClick={e => window.store.dispatch(support())}>赞成</button>
                <button onClick={e => window.store.dispatch(against())}>反对</button>
            </div>
        )
    }
}
export default VoteFooter;

VoteBody.js
import React from 'react';
class VoteBody extends React.Component{
    constructor(){
        super()
    }
    componentDidMount() {
        window.store.subscribe(()=>{
            this.forceUpdate();
        })
    }
    render() {
        //获取不同模块自己的state
        let {n, m} = window.store.getState().vote; 
        return (
            <div>
                <div>赞成{n}票</div>
                <div>反对{m}票</div>
            </div>
        )
    }
}
export default VoteBody;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • redux基础概念及执行流程详解

    全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发...

    柴小智
  • webpack学习(二):先写几个webpack基础demo

    一、先写一个简单demo1 1-1安装好webpack后创建这样一个目录: ? 1-2:向src各文件和dist/index.html文件写入内容: <!DO...

    柴小智
  • angularjs 控制器、作用域、广播详解

    一、控制器 首先列出几种我们平常使用控制器时的几种误区: ? 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如...

    柴小智
  • 2.封装axios、本地存储,安装vuex、element

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模...

    RtyXmd
  • 记一次使用 vue-admin-template 的优化历程

    公司有好几个项目都有后台管理系统,为了方便开发,所以选择了 vue 中比较火的 后台模板 作为基础模板进行开发。但是,开始用的时候,作者并没有对此进行优化,到项...

    前端博客 : alili.tech
  • 400% 的飞跃-web 页面加载速度优化实战

    一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站。 为啥捏? 看图

    前端博客 : alili.tech
  • 20个轻量的 JavaScript 库和插件

    下面这个列表中的免费 JavaScript 插件都是今年发布的,没有臃肿的一体化的框架,它们提供轻量级的解决方案,帮助 Web 开发过程更容易和更快。提供的插件...

    用户4962466
  • Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码

    Webpack 4 给我们带来了一些变化。其中包括更快地打包,引入了SplitChunksPlugin,并淘汰掉之前的CommomsChunksPlugin。在...

    葡萄城控件
  • 18.3.1日报

    node/lib/module.js里会遍历各种目录,然后加到Module.paths里。 然后electron.asar\renderer\init.js里也...

    龙泉寺扫地僧
  • 微信小程序Ⅳ [js文件的外部引用]

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT

扫码关注云+社区

领取腾讯云代金券