zoukankan      html  css  js  c++  java
  • 前端小白第一次使用redux存取数据练习

    在学习了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);
     
  • 相关阅读:
    C# Array.Sort 省内排序
    Centos7开机启动tomcat8
    使用GeoWebCache发布ArcGIS切片地图(实现高清电子地图)
    获取经纬度之间距离的Java工具类
    centos7上安装rar解压软件
    GeoServer之发布Geotiff存在的问题
    $GPRMC解析
    如何在IDEA单元测试中使用Scanner获取输入内容
    GeoServer修改使用内存
    Github无法访问解决办法
  • 原文地址:https://www.cnblogs.com/web-zxq/p/10699844.html
Copyright © 2011-2022 走看看