Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >redux工程化结构

redux工程化结构

作者头像
柴小智
发布于 2020-01-22 04:59:29
发布于 2020-01-22 04:59:29
50700
代码可运行
举报
文章被收录于专栏:菜鸟计划菜鸟计划
运行总次数:0
代码可运行

一、简述

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容器

二、实战代码

直接看代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-01-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React:Redux源码分析
Redux 是JavaScript 应用的状态管理容器,提供集中式、可预测的状态管理。
WEBJ2EE
2019/07/19
9490
React:Redux源码分析
React-Redux入门
ant design https://ant.design/docs/react/introduce-cn
Java架构师必看
2021/03/22
7350
React-Redux入门
从零开始的 Redux
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 目前一般与 React 配合使用。React 提供了 React-redux 库,两者能轻松结合起来。
Innei
2021/12/28
4280
React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理
在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改
itclanCoder
2020/10/25
2.1K0
redux基础概念及执行流程详解
全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==》redux就是这种解决方案:redux只有一个作用,就是为了实现组件之间的信息交互。
柴小智
2020/02/14
8630
你想要的——redux源码分析
备注:例子中结合的是react进行使用,当然redux不仅仅能结合react,还能结合市面上其他大多数的框架,这也是它比较流弊的地方
can4hou6joeng4
2023/11/30
2830
Redux 入门到高级教程
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 (如果你需要一个 WordPress 框架,请查看 Redux Framework。)
老马
2019/05/25
2.9K0
使用Redux和React-redux在React中进行状态管理
首先,我们需要使用create-react-app命令行工具安装新的react应用。
前端修罗场
2022/07/29
3.5K0
使用Redux和React-redux在React中进行状态管理
react+redux+webpack教程3
现代web页面里到处都是ajax,所以处理好异步的代码非常重要。 这次我重新选了个最适合展示异步处理的应用场景——搜索新闻列表。由于有现成的接口,我们就不用自己搭服务了。 我在网上随便搜到了一个新闻服务接口,支持jsonp,就用它吧。 一开始,咱们仍然按照action->reducer->components的顺序把基本的代码写出来。先想好要什么功能, 我设想的就是有一个输入框,旁边一个搜索按钮,输入关键字后一点按钮相关的新闻列表就展示出来了。 首先是action,现在能想到的动作就是把新闻列表放到仓库里,
前朝楚水
2018/04/03
1.1K0
Redux系列x:源码分析
写在前面 redux的源码很简洁,除了applyMiddleware比较绕难以理解外,大部分还是 这里假设读者对redux有一定了解,就不科普redux的概念和API啥的啦,这部分建议直接看官方文档。
IMWeb前端团队
2017/12/29
1.3K0
Redux源码分析
顾名思义就是将多个reducer合成一个reducer。传入的reducer是一个对象,对象的键值是reducer的名称。
IMWeb前端团队
2019/12/03
3770
Redux源码分析
redux源码分析(三) 源码部分
源码结构: - /utils/ - actionTypes.js - isPlainObject.js 判断是否是简单对象 - warning.js 一些警告在控制台打印 - applyMiddleware.js - bindActionCreator.js - combineReducer.js - compose.js - index.js
ACK
2020/01/14
1K0
Redux入门到使用。
action:是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
用户3467126
2019/07/03
9350
Redux入门到使用。
【案例】使用React+redux实现一个Todomvc
❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…
且陶陶
2024/07/25
3480
【案例】使用React+redux实现一个Todomvc
学习react-redux,看这篇文章就够啦!
在 Redux 中,reducer 函数是用来处理状态(state)的函数。它接收两个参数:当前的状态(state)和被分发的 action,然后根据 action 的类型来更新状态并返回新的状态对象。
程序员王天
2023/10/18
7750
实现redux
上面实现了兄弟组件的通信,但是复用性差,而且store里的listeners不应该被外界修改。
一粒小麦
2019/07/18
8310
实现redux
React---react-redux的使用
1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
半指温柔乐
2021/05/10
1.5K0
【微信小程序】---- weapp-redux的使用文档
weapp-redux 下载 weapp-redux 使用实例下载 预览 weapp-redux 使用 1. 引入 weapp-redux 插件 克隆 weapp-redux-demo 代码库 git clone https://gitee.com/Rattenking/weapp-redux-demo.git 将项目文件夹下的 weapp-redux 拷贝到自己项目 2. 创建全局的 store 在 weapp-redux 同级创建 store 文件夹 在 store 文件夹下分别创建 actions
Rattenking
2022/01/06
9030
【微信小程序】---- weapp-redux的使用文档
React结合Redux实现Todolist
使用了redux进行状态管理 删除一个用户首先dispatch了一个deleteTodoList的 action  然后在reducer中返回删除后的数据 store更新数据 组件订阅了store的更新后 更新了内部状态 页面更新成功
憧憬博客
2020/07/20
5430
redux源码解析
applyMiddleware.js import compose from './compose' /** * Creates a store enhancer that applies middleware to the dispatch method * of the Redux store. This is handy for a variety of tasks, such as expressing * asynchronous actions in a concise manner,
theanarkh
2019/03/06
1.3K0
相关推荐
React:Redux源码分析
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档