使用Redux Saga从Redux Store获取和设置值

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';
import rootReducer from './reducers';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

import { put, takeEvery } from 'redux-saga/effects';
import { setSomeValueAction, getSomeValueAction } from './actions';

function* getSomeValueSaga() {
  try {
    // 这里可以调用相关的 API，从后端获取值
    const response = yield call(api.getSomeValue);
    const value = response.data;

    // 调用 Redux 的 Action，将获取到的值设置到 Store 中
    yield put(setSomeValueAction(value));
  } catch (error) {
    // 处理错误，例如发起一个错误处理的 Action
    yield put(handleErrorAction(error));
  }
}

function* setSomeValueSaga(action) {
  try {
    // 从 Action 中获取需要设置的值
    const value = action.payload;

    // 这里可以调用相关的 API，将值设置到后端
    yield call(api.setSomeValue, value);

    // 成功后，可以发起一个成功处理的 Action
    yield put(handleSuccessAction());
  } catch (error) {
    // 处理错误，例如发起一个错误处理的 Action
    yield put(handleErrorAction(error));
  }
}

function* rootSaga() {
  yield takeEvery(getSomeValueAction.type, getSomeValueSaga);
  yield takeEvery(setSomeValueAction.type, setSomeValueSaga);
}

export default rootSaga;

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getSomeValueAction, setSomeValueAction } from './actions';

const SomeComponent = () => {
  const dispatch = useDispatch();
  const someValue = useSelector(state => state.someValue);

  useEffect(() => {
    // 组件加载时触发获取值的操作
    dispatch(getSomeValueAction());
  }, []);

  const handleButtonClick = () => {
    // 点击按钮时触发设置值的操作
    dispatch(setSomeValueAction('new value'));
  };

  return (
    <div>
      <p>{someValue}</p>
      <button onClick={handleButtonClick}>Set Value</button>
    </div>
  );
};

export default SomeComponent;