npm install redux-react-hook --save
import {StoreContext} from 'redux-react-hook';
ReactDOM.render(
,
document.getElementById('root'),
);
useDispatch、useMappedState组件中使用
useDispatch：读取StoreContext，返回dispatch。useMappedState：一个自定义的hook，用来订阅reducer里的状态 （同步、异步都可）
import React,{useEffect,useCallback} from 'react'
import {useDispatch, useMappedState} from 'redux-react-hook';
import {getCustomerRole} from '../../store/actions/customer'
export function DeleteButton({index}) {
// 定义一个 mapState函数
const mapState = useCallback(
state => ({
roleList: state.customer.roleList
}),
[],
);
// 获取store中的数据
const {roleList} = useMappedState(mapState);
// 从store中读取dispatch
const dispatch = useDispatch();
useEffect(()=>{
//dispatch派发action获取数据
dispatch(getCustomerRole())
},[dispatch,roleList,getCustomerRole])
return (
record.id}
/>
);
}
StoreContext
获取上下文的store对象此方法可以获取store中的同步值 异步无法动态更新
import React,{useEffect,useContext} from 'react'
import {StoreContext} from 'redux-react-hook';
function test(){
// 获取上下文的store对象
const store = useContext(StoreContext)
let {dispatch,getState ...other}=store;
//获取store的数据 在不同组件修改数据会动态改变
let storeState=getState();
let { roleList }=storeState.customer ;
useEffect(()=>{
//dispatch派发action获取数据
dispatch(getCustomerRole())
},[dispatch,roleList,getCustomerRole])
return (
record.id}
/>
);
}
你可能感兴趣的:(redux-react-hook)
React Hooks与Redux的配合及状态管理方案(清晰 推荐阅读)
hsany330
Hooks面世已有一段时间，但目前在状态管理方面，还未正式推出官方解决方案。因此目前社区中hooks主要有这么三种方案来解决应用的状态管理问题使用Redux-React-Hook库替代React-redux，与Redux一同配合使用useReducer、useContext等纯hook函数替代react-redux，与Redux一同配合使用useReducer、useContext等纯hook函数
React redux-react-hook
hsany330
importReact,{useState,useEffect,useCallback}from'react'import{useDispatch,useMappedState}from'redux-react-hook';import'./styles.less'import{hook}from'@/actions/hook'import_from'loadsh'exportdefaultfun
react hooks 全面转换攻略(三) 全局存储解决方案
diecuoxie4468
javascript
针对reacthooks的新版本解决方案一.redux维持原方案若想要无缝使用原来的redux,和其配套的中间件promise,thunk,saga等等的话可以使用redux-react-hookgithub链接redux-react-hook一个简单的使用例子:import{useDispatch,useMappedState}from'redux-react-hook';exportfunct
react hooks 全面转换攻略(三) 全局存储解决方案
Grewer
针对reacthooks的新版本解决方案一.redux维持原方案若想要无缝使用原来的redux,和其配套的中间件promise,thunk,saga等等的话可以使用redux-react-hookgithub链接redux-react-hook一个简单的使用例子:import{useDispatch,useMappedState}from'redux-react-hook';exportfunct
react hooks 全面转换攻略(三) 全局存储解决方案
Grewer
前端设计 前端 react-hooks react.js typescript
针对reacthooks的新版本解决方案一.redux维持原方案若想要无缝使用原来的redux,和其配套的中间件promise,thunk,saga等等的话可以使用redux-react-hookgithub链接redux-react-hook一个简单的使用例子:import{useDispatch,useMappedState}from'redux-react-hook';exportfunct
redux-react-hook
zlb123456
npminstallredux-react-hook--save使用了react提供的Context（上下文）功能，给顶层组件Provide传入了store对象，绑定到上下文程序入口import{StoreContext}from'redux-react-hook';ReactDOM.render(,document.getElementById('root'),);useDispatch、use
312个免费高速HTTP代理IP（能隐藏自己真实IP地址）
yangshangchuan
高速 免费 superword HTTP代理
124.88.67.20:843
190.36.223.93:8080
117.147.221.38:8123
122.228.92.103:3128
183.247.211.159:8123
124.88.67.35:81
112.18.51.167:8123
218.28.96.39:3128
49.94.160.198:3128
183.20
pull解析和json编码
百合不是茶
android pull解析 json
n.json文件:
[{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]
pull.xml文件
<?xml version="1.0" encoding="utf-8"?>
<stu>
<name>java
[能源与矿产]石油与地球生态系统
comsci
能源
按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....
那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
类与对象浅谈
沐刃青蛟
java 基础
类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
新站开始被收录后，我们应该做什么？
IT独行者
PHP seo
新站开始被收录后，我们应该做什么？
百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。
至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
oracle 连接碰到的问题
文强chu
oracle
Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案
作者：草根IT网 来源：未知 人气：813标签：
导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）
小桔子
java 继承 swing 接口 监听
都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。
编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
linux常用的命令
aichenglong
linux 常用命令
1 startx切换到图形化界面
2 man命令:查看帮助信息
man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分
name:对命令的简单说明
synopsis:命令的使用格式说明
description:命令的详细说明信息
options:命令的各项说明
3 date:显示时间
语法：date [OPTION]... [+FORMAT]
eclipse内存优化
AILIKES
java eclipse jvm jdk
一 基本说明 在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。 1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
关键字的使用探讨
百合不是茶
关键字
//关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final 类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
JS中定义对象的几种方式
bijian1013
js
1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)：
<html>
<head>
<title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title>
</head>
<script>
var obj = new Object();
表驱动法实例
bijian1013
java 表驱动法 TDD
获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下：
MonthDaysTest.java
package com.study.test;
import org.junit.Assert;
import org.junit.Test;
import com.study.MonthDays;
public class MonthDaysTest {
@T
LInux启停重启常用服务器的脚本
bit1129
linux
启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改
#! /bin/bash
Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo);
Ops=(Start, Stop, Restart);
currentDir=$(pwd);
echo
【HBase六】REST操作HBase
bit1129
hbase
HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作
1. 启动和停止HBase REST 服务 1.1 启动REST服务
前台启动（默认端口号8080）
[hadoop@hadoop bin]$ ./hbase rest start
后台启动
hbase-daemon.sh start rest
启动时指定
大话zabbix 3.0设计假设
ronin47
What’s new in Zabbix 2.0?
去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：
:: Performance improvements::Trigger related da
http错误码大全
byalias
http协议 javaweb
响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。
响应码分五种类型，由它们的第一位数字表示：
1）1xx：信息，请求收到，继续处理
2）2xx：成功，行为被成功地接受、理解和采纳
3）3xx：重定向，为了完成请求，必须进一步执行的动作
4）4xx：客户端错误，请求包含语法错误或者请求无法实现
5）5xx：服务器错误，服务器不能实现一种明显无效的请求
J2EE设计模式-Intercepting Filter
bylijinnan
java 设计模式 数据结构
Intercepting Filter类似于职责链模式
有两种实现
其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下：
package com.ljn.filter.custom;
import java.util.ArrayList;
修改jboss端口
chicony
jboss
修改jboss端口
%JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml
中找到
<!-- The ports-default bindings are obtained by taking the base bindin
c++ 用类模版实现数组类
CrazyMizzz
C++
最近c++学到数组类，写了代码将他实现，基本具有vector类的功能
#include<iostream>
#include<string>
#include<cassert>
using namespace std;
template<class T>
class Array
{
public:
//构造函数
hadoop dfs.datanode.du.reserved 预留空间配置方法
daizj
hadoop 预留空间
对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置
<property>
<name>dfs.datanode.du.reserved</name>
<value>10737418240</value>
mysql远程访问的设置
dcj3sjt126com
mysql 防火墙
第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
ios 使用特定的popToViewController返回到相应的Controller
dcj3sjt126com
controller
1、取navigationCtroller中的Controllers
NSArray * ctrlArray = self.navigationController.viewControllers;
2、取出后，执行，
[self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
Linux正则表达式和通配符的区别
eksliang
正则表达式 通配符和正则表达式的区别 通配符
转载请出自出处：http://eksliang.iteye.com/blog/1976579
首先得明白二者是截然不同的
通配符只能用在shell命令中,用来处理字符串的的匹配。
判断一个命令是否为bash shell(linux 默认的shell)的内置命令
type -t commad
返回结果含义
file 表示为外部命令
alias 表示该
Ubuntu Mysql Install and CONF
gengzg
Install
http://www.navicat.com.cn/download/navicat-for-mysql
Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html
Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
批处理，删除文件bat
huqiji
windows dos
@echo off
::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。
::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。
::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log）
rem 指定待删除文件的存放路径
set SrcDir=C:/Test/BatHome
rem 指定天数
set DaysAgo=1
跨浏览器兼容的HTML5视频音频播放器
天梯梦
html5
HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。 How to enable <video> and <audio> tags in
Bundle自定义数据传递
hm4123660
android Serializable 自定义数据传递 Bundle Parcelable
我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity
把数据放到Intent
C＃：异步编程和线程的使用（.NET 4.5 ）
powertoolsteam
.net 线程 C# 异步编程
异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。
本文中涉及关键知识点
1. 异步编程
2. 线程的使用
3. 基于任务的异步模式
4. 并行编程
5. 总结
异步编程
什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
spark 查看 job history 日志
Stark_Summer
日志 spark history job
SPARK_HOME/conf 下:
spark-defaults.conf 增加如下内容
spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true
spark-env.sh 增加如下内容
export SP
SSH框架搭建
wangxiukai2015eye
spring Hibernate struts
MyEclipse搭建SSH框架 Struts Spring Hibernate
1、new一个web project。
2、右键项目，为项目添加Struts支持。
选择Struts2 Core Libraries -<MyEclipes-Library>
点击Finish。src目录下多了struts
