如何设计Redux操作和还原器,用于可复用组件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (89)

复选框组件的操作文件:

import {createAction} from 'redux-actions';

/****** Actions ******/
export const CHANGE_CHECKBOX_STATE = "CHANGE_CHECKBOX_STATE";

/****** Action creators ******/
export const changeCheckboxState = createAction(CHANGE_CHECKBOX_STATE, (block, name, state) => {
  return {
    block,
    name,
    state: {
      checked: state,
    }
  };
});

复选框组件的还原文件:

import {handleActions} from 'redux-actions';

import {CHANGE_CHECKBOX_STATE} from './CheckBox.actions';

export const checkBoxComponent = handleActions({
  CHANGE_CHECKBOX_STATE: (state, action) => ({
    [action.payload.block]: {
      [action.payload.name]: action.payload.state
    }
  })
}, {});

我用block若要指定页面,name指定特定组件的名称(例如性别)和状态为和对象的新状态。

问题:

  • 将此可重用组件的状态存储到Redux存储中是个好主意吗?
  • 我把Redux动作和还原剂捆绑在一起的反应组件是错的吗?
提问于
用户回答回答于

复选框的示例存储:

const initialState = {
    someFooItem: { isCertainType: false }
};

export function foos(state = initialState, action) {
    switch(action.type){
        case(UPDATE_FOO_VALUE):
            return {
                ...state, 
                [action.payload.id]: {
                    isCertainType: action.payload.isCertainType
                }
            }
    }
}

使用存储的示例复选框

class CheckBox extends React.Component {
    render() {
        return <input type="checkbox" checked={this.props.checked} />
    }
}

父组件

class ParentComponent extends React.Component {
     render() {
         return <CheckBox checked={this.foo.isCertainType} />
     }
}

热门问答

linux如何限制单一ip对服务器的日访问量?

小爱同学

腾讯云 · 技术支持 (已认证)

推荐
您根据当前网站规模和业务了解下【网站管家 WAF】,企业站点可有效抵御恶意攻击,垃圾访问。 图片.png 您反馈网站短信验证码被盗刷,也可结合自己业务,可自行部署iptables进行手动拦截。或其他方式 例如您的网站是nginx,在web配置文件中开启配置HttpLimitR...... 展开详请

兼容性测试只能上传apk测试的吗?

WeTest质量开放平台团队专注游戏,提升品质
推荐

目前不支持公众号的兼容测试,还请知晓

关于群自动解散的问题?

安稳

腾讯科技 · 工单技术支持 (已认证)

推荐
您好,临时群是没有的。云通信的群组只有私有群(Private)、公开群(Public)、聊天室(ChatRoom)、音视频聊天室(AVChatRoom)和在线成员广播大群(BChatRoom)这五种。 您说的这个需求,思路:创建群组时,服务端记录一下时间,到达约定解散的时间以后,...... 展开详请

腾讯云短信接收方对控制台发出的短信做出回应,比如说回复短信“你好”,控制台是否能收到回复的内容?

您好,国内短信可在 短信控制台->国内短信->统计分析->短信记录->回复记录 查看用户回复的短信。 同时可配置文本短信回复回调,配置后会推送相关回复到用户服务器。 统计分析:https://cloud.tencent.com/document/product/382/18062...... 展开详请

不同账号的三台服务器用内网ping不通?

不同账号的服务器本来就已经独立划分,内网肯定是不通的,公网各自都有自己的公网,通是一定的,具体不同账号内网不通你可以参考私有网络VPC的定义。同地域不同账户的不同 VPC 相互隔离,但可以通过建立 同账户同地域对等连接同账户跨地域对等连接 实现内网互联。

对象存储单个文件大于5GB不能改变存储类型为归档存储,那么我上传的时候可以直接指定为归档存储吗?

Lew

腾讯云对象存储 · 工程师 (已认证)

推荐已采纳

可以的,coscmd upload a.txt a.txt -H "{'x-cos-storage-class':'Archive'}" -H 参数可以添加自定义的header

所属标签

扫码关注云+社区