前端小白第一次使用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);