在学习了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. 电脑小白和ta的小白电脑——Git的使用

    简单介绍Git的安装和基本指令,不要抱太大希望QAQ 看完这篇博客,最多学会如何向远程库上传和从远程库拉取项目,复杂功能要 做中学! (一)Git的安装 1.下载 (1)官网下载地址: https:/ ...

  2. Python之字符串方法

    def capitalize(self): # 第一个字符变大写 def center(self, width, fillchar=None): # 内容居中,两端可指定内容填充 def count( ...

  3. xenserver添加磁盘后挂载为本地存储库并且删除

    方法一: 1.1:查看磁盘列表 fdisk -l [root@xenserver ~]# fdisk -l Disk /dev/sdb: 7999.4 GB, 7999376588800 bytes, ...

  4. mongo中的游标与数据一致性的取舍

    除了特殊注释外,本文的测试结果均基于 spring-data-mongodb:1.10.6.RELEASE(spring-boot-starter:1.5.6.RELEASE),MongoDB 3.0 ...

  5. nginx——优化 Nginx access 日志

    1. 配置日志切割 #!/bin/bash savepath_log='/usr/local/clogs' nglogs='/usr/local/nginx/logs' mkdir -p $savep ...

  6. Python开发环境-Pyenv安装使用

    安装使用-Pyenv 简单的python版本管理:pyenv 管理python解释器 管理python版本 管理python的虚拟环境 官网:https://github.com/pyenv/pyen ...

  7. Windows10 VS2017 C++多线程传参和等待线程结束

    #include "pch.h" #include <iostream> #include <windows.h> using namespace std; ...

  8. 使用XHProf查找PHP性能瓶颈

    XHProf是facebook 开发的一个测试php性能的扩展,本文记录了在PHP应用中使用XHProf对PHP进行性能优化,查找性能瓶颈的方法. 一.安装Xhprof扩展 //github上下载ht ...

  9. 解析HTTP报文——C#

    目前没有找到.Net框架内置的解析方法,理论上HttpClient等类在内部应该已经实现了解析,但不知为何没有公开这些处理方法.(亦或是我没找到)那么只能自己来解析这些数据了. public enum ...

  10. 关于atom无限意外退出的一个原因

    atom很好用,也有开发直接使用这个工具进行编码,我经常使用,最近突然会报意外退出的错误. 再重启应用依然会报这个错,然后重启电脑后可以正常使用. 非常疑惑. 原来,是因为Shadowsocks开启的 ...