当用户再次选择页面时,想要在redux saga store中显示保存的数据,可以通过以下步骤实现:
takeLatest
或takeEvery
方法来监听用户选择页面的动作。这些方法可以帮助我们捕获特定的动作,并在其触发时执行相应的逻辑。put
方法来触发一个保存数据的动作,将数据作为payload传递给该动作。connect
方法将store中的数据连接到组件中,并在需要显示保存的数据的地方使用该数据。以下是一个示例代码:
// Saga
import { takeLatest, put } from 'redux-saga/effects';
import { SAVE_DATA, SET_DATA } from './actions';
function* saveDataSaga(action) {
// 保存数据到Redux的store中
yield put({ type: SET_DATA, payload: action.payload });
}
function* rootSaga() {
yield takeLatest(SAVE_DATA, saveDataSaga);
}
export default rootSaga;
// Reducer
import { SET_DATA } from './actions';
const initialState = {
savedData: null,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case SET_DATA:
return {
...state,
savedData: action.payload,
};
default:
return state;
}
};
export default reducer;
// Component
import React from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ savedData }) => {
return (
<div>
{/* 在这里使用保存的数据 */}
{savedData && <p>{savedData}</p>}
</div>
);
};
const mapStateToProps = (state) => ({
savedData: state.savedData,
});
export default connect(mapStateToProps)(MyComponent);
在上述示例中,当用户选择页面时,可以触发一个名为SAVE_DATA
的动作,并将需要保存的数据作为payload传递给该动作。Saga会监听该动作,并在其触发时执行saveDataSaga
函数,将数据保存到Redux的store中。在组件中,可以通过connect
方法将store中的savedData
数据连接到组件中,并在需要显示保存的数据的地方使用该数据。
请注意,上述示例中的代码是一个简化版本,实际应用中可能需要根据具体情况进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云