在學(xué)習(xí)了redux基本教程后，課程參考如下網(wǎng)址：https://www.redux.org.cn/docs/introduction/CoreConcepts.html，開始著手練習(xí)

1.首先編寫一個(gè)actions

export const CHANGE_VALUE = 'CHANGE_VALUE';

function infoInputChange(data) {
return (dispatch) => {
dispatch({
type: CHANGE_VALUE,
data: {
...data,
},
});
};
}

export { infoInputChange };
2.編寫一個(gè)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中填加如下內(nèi)容

import { combineReducers } from 'redux'; import patient from './patient';
// 將現(xiàn)有的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數(shù)據(jù)時(shí)候用 const { PatientTableState = {} } = this.props; const patientSelectedRowKeys = PatientTableState.patientSelectedRowKeys.patientSelectedRowKeys; //數(shù)據(jù)變更后存數(shù)據(jù)用 this.props.dispatch(actions.infoInputChange({ patientSelectedRowKeys: ids, })); export default connect((state) => { return { PatientTableState: state.patient, }; })(PatientTable);

轉(zhuǎn)載于:https://www.cnblogs.com/web-zxq/p/10699844.html

總結(jié)

以上是生活随笔為你收集整理的前端小白第一次使用redux存取数据练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。