Как создавать временные переменные в redux?

Пользователь

nicolette.stoltenberg

от nicolette.stoltenberg , в категории: JavaScript , год назад

70 | 0

redux

2 ответа

Пользователь

lamar

от lamar , год назад

@nicolette.stoltenberg

Redux не поддерживает создание временных переменных, поскольку это противоречит основной концепции библиотеки, которая направлена на создание предсказуемого однонаправленного потока данных.

Вместо этого, в Redux вы можете хранить данные в виде состояния (state) и изменять его через reducer функции. Для того, чтобы временно изменять состояние, можно использовать middleware, такой как redux-thunk или redux-saga.

Redux-thunk позволяет создавать функции-экшены, которые могут быть асинхронными и возвращать функции-диспатчи, которые могут изменять состояние в будущем. Вот пример использования redux-thunk для создания временной переменной:

// action creator
export const fetchSomeData = () => async (dispatch) => {
  dispatch({ type: "FETCH_DATA_REQUEST" });
  const response = await fetch("https://some-api.com/data");
  const data = await response.json();
  dispatch({ type: "FETCH_DATA_SUCCESS", payload: data });
  // временная переменная
  const tempData = processData(data);
  // диспатчим другой экшен, чтобы изменить состояние
  dispatch({ type: "UPDATE_TEMP_DATA", payload: tempData });
};

// reducer
const initialState = {
  data: null,
  tempData: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_DATA_SUCCESS":
      return {
        ...state,
        data: action.payload,
      };
    case "UPDATE_TEMP_DATA":
      return {
        ...state,
        tempData: action.payload,
      };
    default:
      return state;
  }
};

Redux-saga позволяет создавать комплексные саги, которые могут обрабатывать асинхронные операции и выполнять различные действия, включая изменение состояния. Вот пример использования redux-saga для создания временной переменной:

import { call, put, takeLatest } from "redux-saga/effects";

// saga
function* fetchDataSaga() {
  try {
    const response = yield call(fetch, "https://some-api.com/data");
    const data = yield call([response, "json"]);
    yield put({ type: "FETCH_DATA_SUCCESS", payload: data });
    // временная переменная
    const tempData = yield call(processData, data);
    // диспатчим другой экшен, чтобы изменить состояние
    yield put({ type: "UPDATE_TEMP_DATA", payload: tempData });
  } catch (error) {
    yield put({ type: "FETCH_DATA_FAILURE", error });
  }
}

// watcher saga
export function* watchFetchData() {
  yield takeLatest("FETCH_DATA_REQUEST", fetchDataSaga);
}

// reducer
const initialState = {
  data: null,
  tempData: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_DATA_SUCCESS":
      return {
        ...state,
        data: action.payload,
      };
    case "UPDATE_TEMP_DATA":
      return {
        ...state,

1 | 0

Пользователь

kenya

от kenya , 21 день назад

@nicolette.stoltenberg

    tempData: action.payload,
  };
default:
  return state;

} };

Обратите внимание, что в обоих примерах временная переменная создается и используется внутри middleware (redux-thunk или redux-saga) для обработки асинхронных операций и обновления состояния Redux.

0 | 0

Как создавать временные переменные в redux?

2 ответа

Похожие обсуждения: