在学习了redux基本教程后,课程参考如下网址:https://www.redux.org.cn/docs/introduction/CoreConcepts.html,开始着手练习

1.首先编写一个actions

export const CHANGE_VALUE = 'CHANGE_VALUE';

function infoInputChange(data) {
return (dispatch) => {
dispatch({
type: CHANGE_VALUE,
data: {
...data,
},
});
};
}

export { infoInputChange };
2.编写一个reducers
import * as actions from '../actions/patient.js';

const initialState = {
patientSelectedRowKeys: [],
};

export default function index(state = initialState, action = {}) {
switch (action.type) {
case actions.CHANGE_VALUE:
return Object.assign({}, state, {
patientSelectedRowKeys: action.data,
});
default:
return state;
}
}

3.在reducers 的index.js中填加如下内容

import { combineReducers } from 'redux';
import patient from './patient';
// 将现有的reduces加上路由的reducer
const rootReducer = combineReducers({
patient,
// routing: routerReducer,
});
export default rootReducer;
4.在使用的组件存取中要先引入
import { connect } from 'react-redux';
import * as actions from '@actions/patient.js';
//取store数据时候用
const { PatientTableState = {} } = this.props;
const patientSelectedRowKeys = PatientTableState.patientSelectedRowKeys.patientSelectedRowKeys;
//数据变更后存数据用
this.props.dispatch(actions.infoInputChange({
patientSelectedRowKeys: ids,
}));
 
export default connect((state) => {
return {
PatientTableState: state.patient,
};
})(PatientTable);
 

前端小白第一次使用redux存取数据练习的更多相关文章

  1. 前端(十):使用redux管理数据

    react本身能够完成动态数据的监听和更新,如果不是必要可以不适用redux. 安装redux: cnpm install redux --save,或者yarn add redux. 一.react ...

  2. Web前端小白入门指迷

    前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...

  3. Redis 小白指南(四)- 数据的持久化保存(草稿)

    Redis 小白指南(四)- 数据的持久化保存 简介 因为 redis 将数据保存在内存中,很容易诱发的一个问题就是,程序崩溃或服务器重启等情况如何保证数据的正常存储. 当我们以 redis 作为主数 ...

  4. 前端小白想要编写可维护的js

    我是一名前端小白,之前没写过多少代码,心里没有代码质量这个概念,人人都说代码是团队的产物,应该将代码写规范,但是我对具体什么样的代码是可维护的是茫然的. 我没写过多少代码,本来好多东西就不咋会,每次给 ...

  5. Python写的链接数据库存取数据

    Python写的链接数据库存取数据 #!/usr/bin/python # -*- coding: UTF-8 -*- from __future__ import print_function im ...

  6. 使用TP自带缓存时。出现第一次拿不到数据。

    使用TP自带缓存时.出现第一次拿不到数据. 仔细检查逻辑发现了问题所在. 逻辑:直接读缓存,如果没有从数据库查询,然后存入缓存. 问题出在以为$exchange = S($fileName,$exch ...

  7. 使用SharePreferences存取数据(慕课笔记 )

    0.视频地址:http://www.imooc.com/video/3265 1.使用SharePreferences存取数据: public class MainActivity extends A ...

  8. 前端小白webpack学习(二)

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  9. 前端小白webpack学习(一)

    俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...

随机推荐

  1. 编译安装LAMP

    编译安装MariaDB 创建MariaDB安装目录.数据库存放目录.建立用户和目录 先创建一个名为mysql且没有登录权限的用户和一个名为mysql的用户组,然后安装mysql所需的依赖库和依赖包,最 ...

  2. apex透视自瞄无后子弹追踪飞天加速辅助

    apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助 ...

  3. 【转载】IL指令集

    转载自:http://www.cnblogs.com/knowledgesea/p/5461040.html 名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加 ...

  4. MSBuild 命令参数

    Build a Visual Studio project or solution using MSBuild Command Line Arguments  常用命令行参数 详解: MSBuild ...

  5. 学习Spring

    一.Spring 概述 1.概述   Spring 框架是一个开源的 Java 平台,它最初是由 Rod Johnson 编写的,并且于 2003 年 6 月首次在 Apache 2.0 许可下发布. ...

  6. oracle 判断字段内是否含中文

    select * from tabell(表名) where asciistr(字段) like '%\%';

  7. 精进之路之volatile

    volatile 首先了解下Java 内存模型中的可见性.原子性和有序性. 可见性: 可见性是一种复杂的属性,因为可见性中的错误总是会违背我们的直觉.通常,我们无法确保执行读操作的线程能适时地看到其他 ...

  8. java基础继承

    为什么用继承: 因为继承可以减少代码的冗余,提高维护性,为了从根本上解决存在的问题,就需要继承,就是将多个类当中的相同的地方提取到一个父类当中.父类更通用,子类更具体. 父类的继承格式 语法:publ ...

  9. C语言---指针变量详解1

    数据在内存中的地址也称为指针,如果一个变量存储了一份数据的指针,我们就称它为指针变量.在C语言中,允许用一个变量来存放指针,这种变量称为指针变量.指针变量的值就是某份数据的地址,这样的一份数据可以是数 ...

  10. Applets的分析

    一.有关Java Applet的基础 1.JavaApplet就是用Java语言编写的小应用程序,可以直接嵌入到网页中,并能够产生特殊的效果.包含Applet的网页被称为Java-powered页,可 ...