码迷,mamicode.com
首页 > 其他好文 > 详细

前端小白第一次使用redux存取数据练习

时间:2019-04-13 10:32:25      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:als   redux   ted   actions   this   路由   switch   state   action   

在学习了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存取数据练习

标签:als   redux   ted   actions   this   路由   switch   state   action   

原文地址:https://www.cnblogs.com/web-zxq/p/10699844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!