在学习了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. 命令行运行Android Robotium自动化用例或单元测试用例

    本文目录 1.运行所有的测试用例 2.运行单个测试类或某个TestSuite 3.运行某个测试类里面的某个测试方法 4.运行两个不同的测试类或类中的方法 命令行运行Android Robotium自动 ...

  2. Git clone出现SSL certificate problem

    1 可以在cmd下,设置 git config --global http.sslVerify false git clone  XXX 即可. 2 TortoiseGit设置 打开TortoiseG ...

  3. Docker数据卷持久化

    Docker提供三种不同的方式将数据从宿主机挂载到容器中:volumes,bind mounts和tmpfs. volumes:Docker管理宿主机文件系统的一部分(/var/lib/docker/ ...

  4. java基础知识—数组

    1.数组:是一个变量,存储相同数据类型的一组数据. 2.数据的优点:减少代码量.易查找. 3.数组的使用步骤: 1)声明数组:int scores []: 2)开辟空间:scores = new in ...

  5. jQuery中有关each方法的使用

    概述: each() 方法规定为每个匹配元素规定运行的函数. 返回 false 可用于及早停止循环,相当于break. 返回 true 可以结束本次循环,相当于continue. 语法: $(sele ...

  6. Java学习笔记(5)

    齿状二维数组的声明及使用 或者 int[][] triangleArray = new int[5][]; triangleArray[0] = new int[5]; triangleArray[1 ...

  7. 微信小程序调用快递物流查询API的实现方法

    一. 创建index.wxml.index.wxss.index.js 附上代码: <view class='container'> <input class='info' plac ...

  8. Vue-devtools安装步骤

    今天跟着网上参考的vue调试工具安装的方法,总结出更完善的步骤: 步骤一:调往链接地址 https://github.com/vuejs/vue-devtools 步骤二:解压链接地址中的包,到本地桌 ...

  9. 关于mybatis配置文件mapper传int值的问题

    1.首先看mapper代码,这是个更新语句. <set> <if test="sendmode!='' && sendmode!=null"> ...

  10. 博客 新址: https://pheromone.github.io/

    该博客暂时调整歇业,小店地址暂时搬迁至: https://pheromone.github.io/ 该博客只做旧文章的维护工作. 博客 新址:  https://pheromone.github.io ...